Fylgja Utilities

Fylgja Utilities offers 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 Utilities integrates seamlessly as a standalone solution or alongside other utility frameworks like Tailwind CSS and UnoCSS.

Installation

You can install Fylgja Utilities via npm or other Node-based package managers like pnpm or bun:

npm install @fylgja/utilities

Alternatively, you can use it directly via a CDN:

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

Usage

Once installed, you can import the full package with:

@import "@fylgja/utilities";

Alternatively, if you only need specific parts of the utilities.

You can import any utility mentioned below, using:

@import "@fylgja/utilities/{UTILITY_NAME}.css";

align • auto-grid • clip • container • content-lazy • display • divide • flex • flow • gap • gradient • grid-cols • line-clamp • list • overlay • position • rounded • scroll • scroll-mask • scrollbar • size • snap • spacing • sr-only • stack • stretched-link • toggle • transition • truncate • typography

Utilities Overview

Align

Effortlessly align content along both the Y and X axes for flex and grid layouts, as well as for flow layouts. This utility leverages Dynamic CSS Utilities.

Auto Grid

Create responsive grid layouts with the auto-grid utility. This class automatically generates columns based on the configured --max-col-size CSS variable.

Clip

Hide overflowing content with ease. Use clip for all sides, or target specific axes with clip-y (vertical) and clip-x (horizontal).

Container

The container utility provides a standard way to center content and apply a maximum width, often referred to as a wrapper.

This container follows modern flow styles, applying a maximum width once without relying on media queries for each breakpoint. This allows for flexible styling per section using CSS variables to adjust --container-size and --container-gap.

Content Lazy

Implement lazy loading for sections of your page using content-lazy. Adjust the initial size with the content-size variable.

Display

Quickly set the display property of an element.

Divide

The divide utility offers enhanced control over dividers, going beyond basic implementations.

Fylgja provides both divide-y (vertical) and divide-x (horizontal), which seamlessly integrate with your border utilities, eliminating the need for preset values.

Additionally, it works together with the flow utility, to add flow-based spacing between your dividers, providing greater flexibility in layout gaps.

<ul class="divide-y flow">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Flex

Convenient shorthands for display: flex, including options for direction and wrapping, using CSS variables, following the Dynamic CSS Utilities approach.

Flow

While Fylgja’s base styles often include flow spacing, the flow utility allows you to explicitly force a new flow with flow or remove any flow with flow-none.

Gap

Easily set gaps for Grid, Flex, or Column layouts using the gap class or its alias gap-sm. The default gap is 1em (0.5em for gap-sm).

Gradient

Provides specific utility classes for applying border, background, and text gradients, all customizable with CSS variables.

There is no general gradient class; instead, you use one or a combination of the following classes:

You can also combine them, like using text-gradient border-gradient together on the same element.

Grid Cols

Simplified way to set up grid layouts with columns using grid-cols. You can modify the column configuration using CSS variables, following the Dynamic CSS Utility pattern.

Also includes grid-flow, ideal for creating a row of columns for sliders, and is compatible with the gap utility for consistent column spacing.

<div class="grid-cols gap" style="--sm_grid-cols: 2; --lg_grid-cols: 3">
    <div class="col-span-full">Full width</div>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div style="--sm_col: span 2">Spans 2 columns</div>
</div>

Line Clamp

Limit the number of lines in your paragraphs to prevent text overflow. The default is 3 lines.

List

Offers the list-none utility, useful for removing default list markers, especially if you are not using Fylgja’s base styles or when customizing HTML <details> elements (as it also removes the ::-webkit-details-marker).

Overlay

Adds a subtle overlay shadow to an element, often effective in combination with the stack utility.

Got fish?

Position

Set the position property with common default values. Each position can be further customized with CSS variables.

Rounded

A set of straightforward border radius utilities:

• rounded: Applies a standard border radius.
• rounded-conditional: Applies a border radius, but removes it if the element’s size matches the page or container.
• rounded-none: Removes any border radius.
• rounded-inherit: Inherits the border radius from the parent.
• round: Creates a perfectly round element.

Scroll

Enable scrollable overflow on the X or Y axis with scroll-x (horizontal) and scroll-y (vertical).

<div class="scroll-y" style="max-block-size: 300px">
    <!-- Tall content that will scroll vertically -->
</div>

Scroll Mask

Enable Overflow Mask to any overflowing content. Making it more clear to that there is overflowing content.

Usefull in combination with scroll-x and scroll-y.

Scrollbar

Customize the appearance of the scrollbar, including hiding it or making it small.

Size

Convenient shorthands for setting width and height using Dynamic CSS Utilities. Includes w-full, h-full, max-w-full, and max-h-full.

For more detailed sizing options, refer to the Spacing utilities.

Snap

Easily create interactive sliders. This utility works best in conjunction with other layout utilities like Grid Cols and Scroll.

<div
  class="snap scroll-x scroll-mask grid-cols grid-flow gap"
  style="--sm_grid-cols: 2"
>
  ... slides
</div>

Spacing

Dynamic CSS Utilities for quickly setting width, height, margin, or padding on an element.

You don’t need a specific class to use these Dynamic CSS Utilities; simply set the style with:

• --size-y (block-size / height)
• --size-x (inline-size / width)
• --my (margin-block)
• --mx (margin-inline)
• --py (padding-block)
• --px (padding-inline)

along with a valid CSS unit to apply the styles.

The power of Dynamic CSS Utilities extends to breakpoint customization. For example, set a different margin for the md breakpoint using --md_my: 1rem.

This also includes a few shortcuts (but without breakpoints):

• --size (same as setting --size-y and --size-x)
• --m (same as setting --my and --mx)
• --p (same as setting --py and --px)

Screen Reader Only

Visually hide an element from the page using sr-only, while keeping it accessible for screen readers.

Similar to the display utility, you can apply breakpoint-specific styles, e.g., sm:sr-only.

Stack

Effortlessly stack multiple elements on top of each other without the need for manual positioning. This allows you to stack without using position: absolute.

Stretched Link

Make any element fully clickable without breaking link semantics. Use it with a card or with relative class on the parent element to define the clickable area.

This is the body text that should not be part of the link

This is a accessible link text

Toggle

Create interactive toggle states for elements like <details> using the toggle utility.

Transition

Quickly add smooth transitions to elements using the transition utilities. These natively support discrete transitions (like animating display: none).

• transition: Applies a transition to common properties (transform, opacity, color, etc.)
• transition-color: Scopes the transition only to color properties (background, border, text color)
• transition-display: Scopes the transition to display and visibility properties (opacity, transform, display, overlay)

Truncate

Truncate text to a single line with truncate.

Typography

Convenient shorthands for common text styles:

• lead: Makes text a bit larger and bold.
• font-normal: Uses a normal font weight.
• font-bold: Uses a bold font weight.
• text-start: Align text to the left.
• text-end: Align text to the right.
• text-center: Center text alignment.
• italic: Apply italic styling.
• not-italic: Remove italic styling.
• nowrap: Prevent text break.

Support with other CSS Utility Systems

Fylgja Utilities are designed to complement, rather than replace, other CSS Utility Systems like Tailwind CSS.

Most Fylgja utilities are interchangeable with those found in other CSS Utility Systems.

If a similar utility is already present in your chosen system, it’s generally best to use that system’s utility or vice versa.

However, some Fylgja Utilities are unique and can be an excellent addition to any CSS Utility System, providing specialized functionality not commonly found elsewhere.