Getting Started

New to Fylgja? Here’s how to get started.

The most straightforward way to begin is by using Fylgja as your CSS foundation. Although it's a library at its core, it’s designed to work like a framework out of the box.

You can integrate Fylgja in several ways, but the easiest and most recommended approach is to use the meta package.

Our Core Packages

Fylgja is built around three core packages, each designed to embody our goals: simplifying development, promoting maintainability, and giving you control. You can use them together for a complete solution or pick only what you need.

  • Fylgja Base: A classless CSS foundation that provides smart, consistent styling for all standard HTML elements. It’s the perfect starting point to avoid boilerplate code.
  • Fylgja Tokens: Standardize your design with a flexible set of CSS Custom Properties (Design Tokens) for consistency in colors, spacing, and typography.
  • Fylgja Utilities: A curated collection of utility classes to speed up your styling workflow, complementing any methodology.

Together, these packages create a powerful toolkit. For more information, explore the Fylgja Library documentation.

Installation & Quick Start

Install the meta package using npm:

npm install fylgja

This single command installs the core packages: @fylgja/base, @fylgja/tokens, and @fylgja/utilities.

Once installed, import them into your main CSS file:

@import "@fylgja/base";
@import "@fylgja/tokens";
@import "@fylgja/utilities";

What does this do?

By importing @fylgja/base, your project now has a "classless" foundation. This means all standard HTML elements, like buttons, forms, and typography, will have a clean, modern style out of the box—no need to add CSS classes everywhere. This approach is perfect for getting started quickly, especially for content-heavy sites.

For a deeper dive into this concept, see our documentation on classless CSS.

For example, the following HTML markup will be automatically styled without any extra CSS: 

<article>
  <h2>My First Fylgja Article</h2>
  <p>This content is styled by the classless <b>@fylgja/base</b> package.</p>
  <button>Click Me</button>
</article>

From here, you can use utility classes for quick adjustments or dive into CSS Components to build more complex UI.