Fylgja Base

GitHub npm Changelog

Fylgja Base provides a streamlined starting point for any web project. It’s a collection of class-less solutions, allowing you to focus on building your site using plain HTML or your preferred frontend language, without the need to add any additional classes.

If you don’t require everything that Fylgja Base offers, you can import only the parts you need. For example, the preflight module provides a solid foundation for typography but excludes styles for forms, buttons, and the HTML dialog element.

Installation

npm install @fylgja/base

pnpm add @fylgja/base

npx fylgja@latest add base

This copies the file directly into your project. The import path will differ from the one shown in the usage section below.

<link href="https://cdn.jsdelivr.net/npm/@fylgja/base/index.min.css" rel="stylesheet">

Usage

Once installed, you can import the full package with:

@import "@fylgja/base";

Alternatively, if you only need specific parts of the base, you can import them individually:

Import Path	Description
`@fylgja/base/preflight.css`	Global defaults, typography and table defaults
`@fylgja/base/preflight-scoped.css`	Global defaults, scoped typography and table defaults
`@fylgja/base/btn.css`	HTML Button styles + `.btn` class for links
`@fylgja/base/btn-class-only.css`	Just the `.btn` class for adding btn styles
`@fylgja/base/btn-class-less.css`	Just the HTML Button styles
`@fylgja/base/form.css`	Comprehensive form styles
`@fylgja/base/dialog.css`	Dialog styles, including support for popovers

Theme Styles

Fylgja Base provides a clean foundation, intentionally excluding brand colors and extra styling by default.

To apply a pre-defined theme, import it separately:

@import "@fylgja/base/theme.css";

For theme customization, copy the styles to your project:

npx fylgja@latest add theme

This command will add the theme styles to src/css, src/styles, or src/assets (if present), or the current directory if no folder is found.

Beyond brand colors, the theme includes styles for dark mode, view transitions, primary buttons, and off-canvas dialog support.

Preview

Fylgja Base is designed to work seamlessly with plain HTML, so most of what you see on this site uses just HTML, with a few CSS components and Utilities.

Below is a demo showcasing Fylgja Base applied to a wide range of HTML elements. This preview highlights the default styles and improvements you get simply by using Fylgja Base.

View the Fylgja Base Demo in Fullscreen

FAQ

Does Fylgja Base require Fylgja Tokens or Fylgja Utilities?

No. Fylgja Base works standalone on plain HTML. Fylgja Tokens and Fylgja Utilities are complementary packages you can add later, but neither is required for Base's classless styles to work.

Can I use Fylgja Base alongside Tailwind CSS or another utility framework?

Yes. Since Fylgja Base is classless and kept at low specificity, it styles bare HTML elements without competing with utility classes. Import it before your utility layer so utility classes can still override the defaults where needed.

If I only import preflight.css, do buttons and forms still get styled?

No. preflight.css only covers global defaults, typography, and table styles. Buttons, forms, and the dialog element each have their own import (btn.css, form.css, dialog.css) and need to be added separately if you want them styled.

How do I customize colors and other theme values?

Import theme.css for a ready-made theme, or run npx fylgja@latest add theme to copy the theme styles into your project (src/css, src/styles, or src/assets) so you can edit them directly.

Will Fylgja Base's styles override my own custom CSS?

No. Fylgja Base keeps specificity at zero using the :where() selector, so your own styles win without needing !important or extra specificity tricks.