The flexible and lightweight CSS library designed to streamline your web development.

Fylgja CSS empowers developers with a modular and customizable approach to styling web projects. Unlike monolithic frameworks, Fylgja provides focused solutions that enhance your workflow without adding unnecessary bloat.

Why Choose Fylgja?

• Modular Design: Include only the components you need, keeping your CSS lean and efficient.
• Lightweight Core: Start with a minimal footprint, thanks to optimized components and a size-conscious philosophy.
• Customization First: Easily override styles with low specificity and leverage CSS variables for quick adjustments.
• Seamless Integration: Works harmoniously with existing tools like TailwindCSS or UnoCSS.

Core Components

Fylgja offers a suite of modular components to suit 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.
  • Example: A better browser default, form and button styles out of the box.
• Fylgja Tokens (Props):
  • A centralized system for managing design values (colors, spacing, etc.).
  • Available as SCSS or CSS variables for easy integration and customization.
  • Use Fylgja's build tools to tailor tokens to your project's specific requirements.
• Fylgja Utilities:
  • A collection of focused CSS utility classes.
  • Designed to complement, not replace, utility-first frameworks.
  • Seamlessly integrates with Fylgja Tokens, Open Props, or other variable-driven systems.
• Fylgja Components:
  • Ready-to-use, single-class components for building complex UI elements.
  • Accelerates development by providing pre-styled, reusable components.

Modularity in Action

Fylgja's modularity allows you to pick and choose the components that fit your project's needs. For instance, you can use Fylgja Base solely for its form styles, without importing other elements. This granular control ensures optimal performance and minimal bloat.

Performance Optimized

Fylgja prioritizes performance by delivering lightweight components. For example, the minified Fylgja Base Preflight is only 6kb, significantly smaller than many comparable libraries.

Effortless Customization

Fylgja is designed for effortless customization. Low CSS specificity and the use of CSS variables enable you to easily adapt styles to your project's unique design. The :where selector within Fylgja Base ensures that your custom styles are never overridden unintentionally.

Getting Started

Explore the Fylgja documentation at fylgja.dev to learn how to integrate Fylgja into your workflow.

npm install fylgja

Start building your next project with the flexibility and efficiency of Fylgja.