DEV Community: Fylgja CSS

Native CSS Utilities

Sean van Zuidam — Thu, 05 Feb 2026 10:04:30 +0000

With every passing year, CSS becomes more powerful.
The last few have brought amazing additions that are now becoming baseline, and 2026 is shaping up to continue that trend.

Today, we'll focus on one upcoming feature that will fundamentally change how we write CSS utilities: the attr() function.

What is `attr()`?

The attr() function allows you to use HTML attribute values directly in your CSS.
In the past, its use was limited to the content property for displaying text, like showing a link's URL in a print stylesheet:

<a href="https://fylgja.dev/">Explore FylgjaCSS</p>
<style>
@media print {
  a[href^="https://"]::after {
    content: " (" attr(href) ")";
  }
}
</style>

Soon, however, attr() will be usable with any CSS property and will support types beyond just strings.

This opens up a world of possibilities, especially for utility systems.
By adding a type similar to @property you can tell the browser what kind of value to expect:

<div data-grid-cols="2"></div>
<style>
[data-grid-cols] {
  --col-count: attr(data-grid-cols type(<number>), 1);
  display: grid;
  grid-template-columns: repeat(var(--col-count), minmax(0, 1fr));
}
</style>

Here, we're telling the browser that data-grid-cols should be a number.
If an invalid value is provided (e.g., #fff), the browser will use our fallback of 1.

The Evolution of CSS Utilities

So, how does this change the way we build CSS Utilities? Let's look at the evolution of a simple padding utility.

Step 1: Static, Generated Classes

The most common approach today is a static utility framework like Tailwind CSS,
which generates a separate class for each variation.

This is predictable and easy to use, but requires a large CSS file or a build step to generate the styles.

<div class="py-2 px-4"></div>
<div class="py-3 px-5"></div>
<style>
/* Generated CSS */
.py-2 {
  padding-block: calc(var(--spacing) * 2);
}

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
</style>

Step 2: Dynamic Utilities with CSS Variables

To avoid large CSS files and build tools, we at Fylgja developed Dynamic CSS Utilities using inline styles to set CSS variables.

The CSS is minimal, but it comes at the cost of verbosity in the HTML.

<div style="--py: .5rem; --px: 1rem"></div>
<div style="--py: var(--size-3); --px: 1.25rem"></div>
<style>
[style*="--py:"] {
  padding-block: var(--py);
}

[style*="--px:"] {
  padding-inline: var(--px);
}
</style>

Step 3: Native Utilities with `attr()`

The new attr() function gives us the best of both worlds:
the clean HTML of static classes and the dynamic,
build-free nature of CSS variables.

<div data-py="2" data-px="4"></div>
<div data-py="3" data-px="5"></div>
<style>
[data-py] {
  padding-block: calc(var(--spacing) * attr(--data-py type(<number>), 1));
}

[data-px] {
  padding-inline: calc(var(--spacing) * attr(--data-px type(<number>), 1));
}
</style>

This approach is clean, requires no build step, and gives us sensible defaults.
It even handles responsive variants elegantly:

<div data-md-py="2"></div>
<style>
@media (width >= 768px) {
  [data-md-py] {
    padding-block: calc(var(--spacing) * attr(--data-py type(<number>), 1));
  }
}
</style>

Finding the Right Balance

Should attr() be used for everything
A hard NO. Utilities are great for simple, repeatable patterns like layouts, but they shouldn't replace well-crafted components.
They should complement them.

For example, our own @fylgja/card component can be combined with attr() based utilities
to create complex variations without writing new CSS:

<article class="card" md-grid-cols="50px 1fr" gap="4"></article>

Here, md-grid-cols and gap could be attr() utilities that apply layout styles at different breakpoints,
making the component system both flexible and readable.

What's Next?

This new way of defining CSS utilities is exciting, but it's still on the horizon.
As of this writing, the typed attr() function is only supported in Chrome and Edge.

While we wait for broader browser support, you can experiment with this approach today.
We are exploring it for @fylgja/utilities,
and you can check out the spacing utilities we showed here.

A build tool could be an option in the future to create the fallback values, but for now, using inline CSS variables,
as shown in our Dynamic CSS Utilities concept, remains a great, cross-browser compatible solution.

A Quick Shout-Out

While writing this post, we did our own research and experimented with attr() support in Fylgja.
But we also took inspiration from these excellent articles by other developers exploring the same topic:

Advanced CSS attr() by Una Kravets
The Modern attr() by Ahmad Shadeed

We especially loved the approach to CSS Anchors in Una's article.
If you want to dive deeper into attr(), we highly recommend giving their posts a read.

For the most detailed technical information,
the MDN Web Docs are always the best place to check: MDN attr().

What Are Design Tokens, and Why Should You Care?

Sean van Zuidam — Tue, 23 Sep 2025 07:58:44 +0000

As developers and designers, we've all been there. You're working on a new feature, and you need to use the brand's primary color. You open the inspector, find a button that looks right, and copy the hex code: #3B82F6. A week later, another developer does the same but samples it from a slightly different banner and gets #3B83F7.

Individually, these tiny inconsistencies are harmless. But they accumulate. Over time, your application's UI becomes a patchwork of "almost-right" values, leading to a messy user experience and a maintenance nightmare.

This is the problem that Design Tokens solve.

What Exactly Are Design Tokens?

At their core, design tokens are a methodology for managing your design decisions. They are named entities that store the individual, low-level values of your design system, like colors, spacing, typography, and corner radii.

Think of them as variables for your design. Instead of hard-coding a value like #3B82F6 directly in your CSS or UI component, you reference a token, for example, color-brand-primary.

These tokens are stored in a technology-agnostic format like JSON, so they can be used anywhere. Here's a simple example:

{
  "color": {
    "brand": {
      "primary": "#3B82F6",
      "secondary": "#EC4899"
    },
    "text": {
      "base": "#1F2937",
      "subtle": "#6B7280"
    }
  },
  "font": {
    "family": {
      "sans": "Inter, sans-serif"
    },
    "size": {
      "base": "1rem",
      "lg": "1.125rem"
    }
  },
  "spacing": {
    "sm": "0.5rem",
    "md": "1rem",
    "lg": "1.5rem"
  }
}

This file becomes the single source of truth for your entire design system.

Why Do They Matter?

Adopting a token-based approach might seem like extra work upfront, but it pays off massively by establishing a robust and scalable foundation for your UI.

🚀 Unbreakable Consistency

When every part of your application—from CSS styles to JavaScript components—references the same set of tokens, your UI becomes inherently consistent. If the brand's primary color ever needs to change, you update it in one place, and the change propagates everywhere automatically.

🤝 A Shared Language for Designers and Developers

Tokens bridge the communication gap between design and development. Designers can create their layouts in Figma or Sketch using tokens like spacing-md, and developers can implement the exact same token in the code. There's no more guesswork or manual value conversion.

🎨 Effortless Theming

Want to add a dark mode? Or support white-labeling for different clients? With design tokens, it's simple. You can create different token files for each theme. The application's structure remains the same; you just swap out the token values.

A Familiar Face: Comparison to Tailwind CSS

If you've ever used a utility-first CSS framework like Tailwind, you're already familiar with the concept of design tokens, even if you didn't call them that.

The theme object in your tailwind.config.js file is essentially a design token system.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      'blue': '#3B82F6',
      'purple': '#EC4899',
    },
    spacing: {
      '1': '8px',
      '2': '12px',
    },
    // ...etc
  },
}

When you use a class like bg-blue or p-1, you are referencing a design token. The power of a dedicated design token system is that it decouples these decisions from a specific framework, allowing you to use them across any platform or technology you need.

Bringing Your Tokens to Life with Fylgja

So, you have your beautiful JSON file with all your design decisions. How do you turn that into usable CSS?

We built the @fylgja/props-builder to solve this exact problem. It's a powerful NPM package that takes your design token files and compiles them into a variety of formats, including CSS Custom Properties, Sass variables, and JavaScript objects.

This allows you to maintain a single source of truth and use your design decisions in whatever format your project needs.

The Props Builder is the final, critical step in making your design tokens a truly integrated part of your development workflow. By embracing design tokens with Fylgja, you're not just organizing your styles; you're investing in a more consistent, scalable, and collaborative future for your UI.

Fylgja 2.1 is Live: New Utilities, Performance Boosts, and More

Sean van Zuidam — Thu, 07 Aug 2025 10:07:12 +0000

We're excited to announce the release of Fylgja 2.1!
This update is packed with improvements across the Fylgja library,
focusing on new features, performance enhancements.

Let's dive into what's new.

A More Accessible and Performant Foundation with @fylgja/base

Our base styles have received significant upgrades to improve both accessibility and performance.
We've enhanced aria attribute support for buttons, making it easier to manage states with JavaScript.

We've also trimmed down the selector for the ::file-selector-button and performed other cleanups to reduce the overall CSS size.

For a full breakdown of the changes, check out the @fylgja/base changelog.

More stable @fylgja/tokens

A small but powerful addition, we've introduced the @property --hue to our tokens.
This allows for smooth animations on all colors.
If you've seen our homepage, you might have noticed the colors change when scrolling—this is all powered by the new @property,
which gracefully falls back if not supported.

In addition, we've fixed and improved the design-tokens syntax to be more in line with the specification.

See all the token enhancements in the @fylgja/tokens changelog.

Powerful New @fylgja/utilities

This release cleans up the divider utility, making it significantly smaller than the previous version.
The gap is now handled through the flow or gap utility instead of relying on a separate utility.

We've also added several new utilities for text and the all-new scroll-mask utility for adding overflow shadows to scrollable elements.

For more details, see the @fylgja/utilities changelog.

We're confident that Fylgja 2.1 will help you build better, faster, and more accessible websites. Update to the latest version today to take advantage of all these new features and improvements! We welcome your feedback and look forward to seeing what you create.

Happy coding!

Fylgja 2.0 is Live

Sean van Zuidam — Mon, 21 Apr 2025 15:01:15 +0000

Get ready for a significant evolution in Fylgja!

We're excited to release Fylgja 2, a fundamental shift in our CSS library's architecture.

This new version is built from the ground up with a focus on modularity, enhanced performance, and a streamlined development experience. We've improved all facets, resulting in a more powerful and user-friendly CSS solution.

This release represents a complete rebuild of our core, making Fylgja 2 a solid foundation for your projects.

Why a New Foundation? Addressing V1's Challenges and Enhancing Developer Experience

In our journey working with Fylgja v1, we learned a lot. While its modularity was a strength, managing numerous npm dependencies became a maintenance burden. We recognized the need to simplify this aspect and enhance the overall developer experience.

Fylgja 2 tackles this by introducing a more streamlined package structure. We've bundled our three core concepts into three dedicated packages.

Fylgja Base Encompasses the classless styles, including components like forms and buttons.
Fylgja Tokens Houses our CSS properties for colors, spacing, and more.
Fylgja Utilities Provides a curated set of helpful utility classes.

Each of the three core packages offers individual imports, allowing you to include only the specific parts you need, without compromising modularity.

Embracing Modern CSS for Enhanced Flexibility and Performance

With this architectural overhaul, we've also embraced modern CSS features that we planned but held back on to ensure stability. This includes the use of the :is() and :where() selectors, which significantly improve the ease of overriding styles and contribute to an even smaller overall footprint.

The bundling of core components has also led to noticeable size improvements. The Fylgja Base package, which includes all the essential default styles, clocks in at a lean 14kb.

Beyond the bundling and size optimizations, we've also refined each of the three core packages:

Fylgja Base A Solid Foundation for Classless Styling

Fylgja Base is now providing an exceptional classless styling experience. It's designed to make working with HTML or JSX feel intuitive and efficient.

By using semantic HTML, you can achieve well-styled pages, without the need to apply numerous classes.

[!Note]
Fylgja Base is not intended to be a traditional CSS Reset or Normalize.

Instead, it aims to establish a sensible and improved browser default that you can build upon.

We're also excited to introduce a scoped version of typography styles, named prose, inspired by TailwindCSS's approach. Our implementation differs by prioritizing CSS inheritance, a often overlooked fundamental strength of CSS.

We plan to release presets for UnoCSS and TailwindCSS, allowing you to use the best of both worlds in your projects.

Fylgja Tokens A Refined and Dynamic Color System

Fylgja Tokens have been optimized and streamlined, building upon the solid foundation of previous Fylgja packages for color, sizes, borders, shadows, and layers.

Unlike some other CSS property libraries like Open Props, our color system is dynamic. Instead of a long list of static values that can introduce unnecessary overhead and require build tools, we utilize a dynamic list of colors that can be modified using hue and chroma modifiers.

This allows you to easily set your own or predefined hues on the element or root selector:

:root {
    --hue: var(--hue-blue);
}

.my-test-element {
    background-color: var(--color-10);
    color: var(--color-1);
}

And provides you with complete control while ensuring a consistent and manageable color system, and we've refined the token values, making Fylgja Tokens as lean as possible without sacrificing functionality.

Fylgja Utilities Empowering You with Dynamic and Curated Tools

Fylgja Utilities are not intended to replace comprehensive CSS utility systems like Tailwind CSS or UnoCSS. Instead, they are designed to complement these systems or provide a lightweight utility solution when you prefer to avoid a full build toolchain.

They can be used directly without requiring build tools, and also offer compatibility when integrated with them.

This curated set of CSS utilities offers a range of handy features such as the Auto Grid and Snap.

We're also introducing new concepts for utilities, starting with Dynamic Utilities. This approach ensures that utilities are applied at the component or page level, preventing unnecessary bloat in your global CSS.

A prime example is our approach to modifiers, like alignment utilities (often seen in utility systems). In Fylgja, we offer a single alignment utility that can be customized using the power of CSS variables.

And we're taking this a step further with spacing utilities, allowing you to add padding to an element simply by using:

<button style="--px: 2rem">Dynamic Utilities in action</button>

This makes CSS utilities truly dynamic, ensuring that each value doesn't contribute to an ever-growing global CSS size.

What's Next? Expanding the Fylgja Ecosystem

Our journey doesn't stop here! We're already working on expanding the Fylgja ecosystem with new CSS Components, the Input and Button Groups are already available.

Updating from Fylgja v1.x

Since Fylgja 2 represents a complete rebuild, there isn't a direct automated upgrade path or script, however, due to the modular nature of even v1, you can gradually replace features from v1 with the new version.

For detailed information, please refer to our extensive Library and Documentation.

Share Your Thoughts and Support Fylgja!

If you're as excited about Fylgja 2 as we are, please take a moment to star our Github Repository. Your support helps us grow and reach more developers!

We'd also love to hear your feedback! Share your suggestions and opinions on our Github Discussions. If you write a blog post about Fylgja 2, please share it with us on your favorite social media platform using our social media handle. We're eager to see what you build with Fylgja 2!

Fylgja v1.2 is here!!

Sean van Zuidam — Mon, 25 Jul 2022 22:25:00 +0000

The second minor version of Fylgja has been released, and it includes some significant updates.

So what has changed between Fylgja v1.1 and v1.2.

Slim down existing components
New Native CSS Components, The Range Slider
CSS props are here!
Preview components directly on Fylgja.dev
And more!

Slim down existing components

First, we have started working on enhancing the already-existing components by organising the code and rearranging it.

This introduces some improvements without compromising the exciting code base and reduces the size of the components.

As a result, many CSS components now have SCSS mixin options, which makes it simpler to use the strong foundation on your own class- or scope-specific styles.

New Native CSS Components, The Range Slider

New to the block is the HTML Input Range Slider.

The Range slider will work out of the box if you load the @fylgja/range and use in your html the <input type=range>.

Check out the Fylgja Range Component

CSS props are here!

Surprise, surprise Fylgja has also added CSS props!

Despite the fact that Fylgja already integrates seamlessly with other CSS Props (Design Tokens) systems, such as Open Props or Pollen.

Additionally, we at Fylgja wanted to support our own version.

The Fylgja version will primarily concentrate on keeping the tokens straightforward, so there won't be any tokens with values that are exactly one to one.

With v1.2, we now provide;

Colors
Easing (transitions)
Media Query tokens, based and part of the Mq component
Shadow
Sizes, for not just sizes but also typography and spacing.
Z-layer (z-index)

Check out the Fylgja CSS Props for what is available.

Preview components directly on Fylgja.dev

Even though we do provide this, we learned from user feedback that visitors were unable to find any demos or previews.

As a result, in addition to the already present view demo buttons, we are rolling out previews for each component, with few all ready live.

And more!

New bundle option for the CSS props
Fixed import issue for utilpack #40
Fixed iOS selectbox has overflow when the text is to large for the box #66
Introduced @layer support for auto-grid, button, container and stretched-link, trough separate import, this will make it easier to be used Tailwind's @apply.

Get the latest release

With Node;

npm install @fylgja@1.2

CDN:

<link href="https://unpkg.com/fylgja@1.2/fylgja.css" rel="stylesheet">

or get each CSS Component separately on the Fylgja Components page as intended.

How to use with another exciting framework

Sean van Zuidam — Sat, 27 Nov 2021 15:33:52 +0000

As we mention multiple times, on our site 😅, Fylgja is component based framework, meaning you can download and use each CSS component separately.

Making it easier to combine and use with other CSS frameworks or to add it to an existing project.

So how do you actually do this?

First make sure to understand what compiler your running. There are 2 use cases;

SCSS based
PostCSS based with postcss-import

most other tools have no impact with using Fylgja.

How to use with Utility based frameworks, like TailwindCSS

So for example if you are running a TailwindCSS or other utility CSS based framework, like WindiCSS, thats one of the easiest use cases.

The only components that might conflict are the Utilpack, Transition and Transform components, since these are also utility based CSS components.

So if you are using TailwindCSS you can simply install the @fylgja/form component and include it in your CSS like this.

@import "tailwindcss/base";
@import "tailwindcss/components";

@import "@fylgja/form";

@import "tailwindcss/utilities";

And now you don't need to add any CSS classes for your form elements, since the @fylgja/form component styles them directly.

And this way you can also add more and more Fylgja CSS components without having to create them with utility classes.

So instead having to use @apply to create a Card component, You can just include it, just as with the form. The only difference is the Fylgja Card component uses classes, but that is just wat we want, moving to a more DRY approach and still using the flexibly of utility classes. 😄

How to use with Component based frameworks, like Bootstrap

This is a little harder since some components already exists, so make sure to disable the CSS Component you want to replace.

So you can add CSS Components that don't exist in Bootstrap, or replace existing ones with Fylgja CSS components.

For Bootstrap you could extend the utilities with our Utilpack component, adding more utility power, or add some Native CSS components like the form to simplify the HTML.

So how do you actually remove CSS components from Bootstrap?

First make sure that you don't import Bootstrap using a single import. Instead load everything from the bootstrap.scss file separately,

@import "bootstrap";

load everything separately, like this;

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
...
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

and include this in your main.css with the newer @use syntax.

Now in your main.css add your Fylgja Components like you normally do. And in your custom Bootstrap import, you can disable unused components or components you want to replace with Fylgja Components.

This Post and Guide is originally from the Fylgja site

Fylgja a new CSS framework, WHY!

Ruud van Zuidam — Sun, 29 Aug 2021 07:40:14 +0000

Time to introduce Fylgja a new CSS framework, there are already a lot of CSS frameworks, almost everybody knows Bootstrap, Material and Tailwind.

None of them are bad, each of them does the job, and if one of them fits the way you are working, you're probably happy.

Looking around on dev.to you would find articles, describing CSS frameworks and their pros and cons, for example;

🚀20 Best CSS3 Library For Developers.

Chetan Atrawalkar ・ Jul 27 '21

#css #webdev #beginners #codenewbie

11 Best CSS Frameworks To Look Forward In 2020

Vethee Dixit ・ Jun 3 '20

#css #webdev #framework #design

Best CSS Frameworks in 2022

ThemeSelection for ThemeSelection ・ Sep 8 '20

#css #opensource #javascript #html

Battle of the Frameworks, Which one to choose and why.

Pravunath Singh ・ Apr 26 '21

#css #tailwindcss #beginners #frontend

The Best is of course opinionated, choose what works for you,
and always check Github to see if there is active development.
A dead framework is not a great investment.

So why! Fylgja, well because its a very good tool for frontenders who understand CSS and need a consistent basis for their projects.

Some history, years ago we started working with Bootstrap 2, using it for frontend design, we developed it as an extend / utility pack to give us tools to work better and faster.

Initially developed with LESS and Grunt we switched to SCSS and GULP, and it became a daily tool for us, read the full story here.

On the road we learned from others and we continuously kept developing it to improve things, and since we are only human and are proud of our product we like to share it with you all.

We put it on Github and released version 1 on 22 June this year, you can find the Website with the documentation on Fylgja.dev

Of course, we could fill this article with exaggerating marketing text, telling you how good it is, and why we’re the best (we are 😁) but no BS here, Take a look, try it out, use it and contribute if you like.