Your CSS Companion

Built with modularity in mind, Fylgja CSS allows you to pick exactly what you need and combine it seamlessly with other solutions. Whether you're starting a new project or integrating complex UIs, Fylgja provides a flexible, lightweight foundation to streamline your development.

Why Choose Fylgja?

• 🧩 Modular Design: Include only the components you need, keeping your bundle lean and efficient.
• ⚡ Lightweight Core: Start with a minimal footprint, optimized for performance.
• 🎨 Customization First: Override styles effortlessly with low specificity and extensive CSS variable support.
• 🤝 Seamless Integration: Works in harmony with frameworks like TailwindCSS, UnoCSS, and other tools.

Core Ecosystem

Fylgja offers a suite of packages tailored to your development needs:

Fylgja Base

A robust foundation that goes beyond basic resets.

• Provides sensible default styles for common HTML elements using classless styling.
• Ensures cross-browser consistency without unnecessary overrides, leveraging :where for zero specificity.
• Includes: Improved browser defaults, form controls, and button styles out of the box.

Fylgja Tokens

A centralized system for managing design values (colors, spacing, typography).

• Available as SCSS or CSS variables for easy integration.
• Use Fylgja's build tools to tailor tokens to your specific brand requirements.

Fylgja Utilities

A collection of focused CSS utility classes.

• Designed to complement—not replace—utility-first frameworks.
• Seamlessly integrates with Fylgja Tokens and other variable-driven systems.

Fylgja Components

Ready-to-use, single-class components for building complex UI elements.

• Accelerates development with pre-styled, accessible components.
• Available as individual packages (e.g., @fylgja/card, @fylgja/dialog).

Modularity in Action

Fylgja's modular architecture puts you in control. For instance, you can use Fylgja Base solely for its form styles without importing the entire library. This granular control ensures optimal performance and eliminates bloat.

Performance Optimized

We prioritize performance. The minified Fylgja Base Preflight is only ~6kb, significantly smaller than many comparable libraries, ensuring your site loads fast.

Effortless Customization

Designed for flexibility, Fylgja uses low CSS specificity and CSS variables, enabling you to adapt styles to your unique design system easily. The :where selector in Fylgja Base ensures your custom styles always take precedence without fighting specificity wars.

Getting Started

Install the full Fylgja suite via NPM:

npm install fylgja

Or install individual packages as needed:

npm install @fylgja/base @fylgja/tokens

Usage

Import the packages in your CSS:

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

Or use via CDN:

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

Documentation

Explore the full documentation and component library at fylgja.dev.

License

This project is licensed under the MIT License.