Fylgja your CSS Companion
Build with modularity in mind, Fylgja CSS allows you to pick what you need and combine it with other solutions. Fylgja CSS is your guide to make it easier to get started and to introduce complex UI's with ease.
Simplifying your CSS Experience
Fylgja CSS makes CSS development Modular, Lightweight and Easy to Customize
Modular Approach
While Fylgja CSS may sound like a framework, it is highly modular. This allows you to include only the parts you need for a specific project. For instance, with Fylgja Base, you can opt to include just the form styles without pulling in everything else. This modularity extends to all parts of the Fylgja CSS library, ensuring that your project stays lean and efficient.
Lightweight by Design
Fylgja CSS is designed to be compact. You only load what you need, so the overall size of your CSS is determined by your selections. For example, the minified Fylgja Base Preflight is just 6kb, smaller than many other classless CSS libraries and frameworks with similar features.
Extendable
Fylgja CSS's modular nature is built for interoperability. It's designed to work harmoniously alongside your existing or preferred CSS frameworks, allowing you to leverage the strengths of both without conflict.
Easy to Customize
Fylgja CSS is built with low CSS specificity, allowing you to override styles easily, and with Fylgja Base, specificity is kept at zero using the :where selector, meaning your custom styles won’t be disrupted. In addition, Fylgja CSS includes CSS variables where appropriate, making customization quick and straightforward with just a few lines of code.
What is Fylgja CSS?
Fylgja CSS is structured around three core packages
Base
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.
Tokens
Establish a consistent design language across your projects with Design Tokens. Tokens eliminant redundant variations in design elements, ensuring a unified structure throughout your codebase.
Utilities
Utilities a focused collection of production-ready CSS utilities, designed for direct use without a build step, each utility is carefully selected for practical application.
Fylgja UI
Components you copy, not dependencies you install
24 components built on plain, accessible HTML. Paste one into any project, in any framework, and style it with the tokens you already have.
+5
Avatar A round image representing a user, with an initials fallback and a stacked group.
Button Group A segmented control: a group of joined buttons where one option is selected, built from radios styled as buttons.
Review Stars A star rating input built from radio buttons and the input-group --steps modifier, with no JavaScript.
Whats Next
We are continuously developing Fylgja CSS, so expect regular updates.
Framework Presets
Seamlessly integrate with other CSS frameworks, including Tailwind CSS and UnoCSS, to add missing features or extend functionality.
Starter kit for Astro JS
Simplify your Astro and Fylgja development with our opinionated template and ready-to-use UI blocks.
Fylgja UI Library
Build your user interfaces quickly with our fully-featured library of UI components.
More CSS Components
Explore all available options and components in our component library.
Start building with Fylgja CSS
Prepare for a development environment that can finally keep pace with the speed of your mind.