---
title: "Utilities"
pageTitle: "Fylgja Utilities"
description: "Fylgja utilities provides a curated set of CSS utilities"
npm: "@fylgja/utilities"
git: "https://github.com/fylgja/fylgja/tree/main/utilities"
sortOrder: 3
---

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:

```sh
npm install @fylgja/utilities
```

Alternatively, you can use it directly via a CDN:

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

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/utilities";
```

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

You can import any utility mentioned below, using:

```css
@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].

<figure class="demo-wrapper flex align-center" style="--demo-wrapper-min-size: 200px">
<code class="demo-box --inline">Align Center</code>
</figure>

| CSS Utility Name | Description                                                              |
| ---------------- | ------------------------------------------------------------------------ |
| `align`          | Main utility class, can be modified using CSS variables                  |
| `align-center`   | Alias for `class="align" style="--align: center; --align-items: center"` |
| `align-self`     | Main utility class, to apply to a child element                          |
| `align-self-end` | Alias for `class="align-self" style="--align-self: end auto;"`           |

### 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.

<figure class="demo-wrapper --resize">
<div class="auto-grid gap">
<div class="demo-box --inline">1</div>
<div class="demo-box --inline">2</div>
<div class="demo-box --inline">3</div>
<div class="demo-box --inline">4</div>
</div>
</figure>

### 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.

| CSS Utility Name              | value                                        |
| ----------------------------- | -------------------------------------------- |
| `hidden`                      | `display: none`                              |
| `block`                       | `display: block`                             |
| `inline-block`                | `display: inline flow-root`                  |
| `flex`                        | `display: flex`                              |
| `inline-flex`                 | `display: inline flex`                       |
| `grid`                        | `display: grid`                              |
| `inline-grid`                 | `display: inline grid`                       |
| `table-cell`                  | `display: table-cell`                        |
| `open:{DISPLAY}`              | Open modifier for dialogs and popovers       |
| `{sm,md,lg,xl,xxl}:{DISPLAY}` | Apply display styles at specific breakpoints |

### 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.

<figure class="demo-wrapper">
<ul role="list" class="divide-y flow">
<li>A better way to</li>
<li>handle divides</li>
<li>and supports gaps to!</li>
</ul>
</figure>

```html
<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.

| CSS Utility Name | Description                                             |
| ---------------- | ------------------------------------------------------- |
| `flex`           | Main utility class, can be modified using CSS variables |
| `flex-col`       | Alias for `class="flex" style="--flex-dir: column"`     |
| `flex-wrap`      | Alias for `class="flex" style="--flex-wrap: wrap"`      |
| `flex-none`      | Helper for child elements, Sets: `flex: 0 0 auto`       |
| `flex-auto`      | Helper for child elements, Sets: `flex: 1 1 auto`       |

### 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:

| CSS Utility Name | Description |
| --- | --- |
| `bg-gradient` | Applies a background gradient |
| `text-gradient` | Applies a text gradient (clips background to text) |
| `border-gradient` | Applies a border gradient using `padding-box` and `border-box` clipping |

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

<figure class="demo-wrapper">
<div class="auto-grid gap">
	<div
		class="card bg-gradient"
		style="
			--card-color: #111;
			--gradient-angle: 35deg;
			--gradient-stops: red, yellow;
		"
	>
		background Gradient
	</div>
	<div
		class="card text-gradient"
		style="--gradient-angle: 35deg; --gradient-stops: red, yellow"
	>
		Text Gradient
	</div>
	<div
		class="card border-gradient"
		style="--gradient-angle: 35deg; --gradient-stops: red, yellow"
	>
		Border Gradient
	</div>
	<div
		class="card text-gradient border-gradient"
		style="--gradient-angle: 35deg; --gradient-stops: red, yellow"
	>
		Text & Border Gradient
	</div>
</div>
</figure>

### 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.

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

```html
<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.

<figure class="demo-wrapper --resize" style="width: 500px">
	<p class="line-clamp">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde aliquam nisi ea! Et veniam delectus voluptates. Architecto consectetur placeat eius quaerat voluptas tempore id maiores, suscipit dolore, nihil qui voluptatum.</p>
	<figcaption class="text-center italic text-muted">Resize this to see the max lines in effect</figcaption>
</figure>

### 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.

<figure class="demo-wrapper">
<div class="stack inline-grid">
<img src="/images/placeholders/seagull.webp" alt="Seagull, Got fish?" width="480" height="320" loading="lazy">
<div class="overlay align-self" style="--p: 1rem; --align-self: end auto">Got fish?</div>
</div>
</figure>

### Position

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

| class      | value                     |
| ---------- | ------------------------- |
| `relative` | Sets `position: relative` |
| `sticky`   | Sets `position: sticky`   |
| `absolute` | Sets `position: absolute` |
| `fixed`    | Sets `position: fixed`    |

### 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).

```html
<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.

| CSS Utility Name | Description |
| --- | --- |
| `scrollbar-none` | Completely hides the scrollbar |
| `scrollbar-thin` | Makes the scrollbar visually thinner |

### 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](#spacing).

### Snap

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

<figure class="demo-wrapper">
<div class="snap scroll-x scroll-mask grid-cols grid-flow gap" style="--sm_grid-cols: 2">
<img src="/images/placeholders/cat.webp" alt="" width="480" height="320" loading="lazy">
<img src="/images/placeholders/dog.webp" alt="" width="480" height="320" loading="lazy">
<img src="/images/placeholders/bear.webp" alt="" width="480" height="320" loading="lazy">
<img src="/images/placeholders/fox.webp" alt="" width="480" height="320" loading="lazy">
<img src="/images/placeholders/hare.webp" alt="" width="480" height="320" loading="lazy">
</div>
</figure>

```html
<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.

<figure class="demo-wrapper">
<div class="card --hover inline-block">
	<img src="/images/placeholders/frog.webp" alt="" width="480" height="320" loading="lazy">
	<div class="card-content">
	<p>This is the body text that should not be part of the link</p>
	<a class="stretched-link btn --primary" href="#stretched-link">This is a accessible link text</a>
	</div>
</div>
</figure>

### Toggle

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

| CSS Utility Name | Description                                          |
| ---------------- | ---------------------------------------------------- |
| `toggle-flip`    | Flips the element when toggled                       |
| `toggle-rotate`  | Rotates the element when toggled                     |
| `toggle-hide`    | Hides the element when the state is open/active      |
| `toggle-show`    | Shows the element only when the state is open/active |

<figure class="demo-wrapper flex-wrap gap" style="--demo-wrapper-min-size: 8rem">
<details open>
    <summary class="list-none btn">
    <span>Click Me!</span>
    <span class="toggle-flip">↓</span>
    </summary>
    <div style="--my: 0.5rem">Hello there.</div>
</details>
<details open>
    <summary class="list-none btn">
    <span>I will Rotate when toggling!</span>
    <span class="toggle-rotate transition">↓</span>
    </summary>
    <div style="--my: 0.5rem">Hello there.</div>
</details>
<details open>
    <summary class="list-none btn stack">
    <span class="toggle-hide">Content is Closed!</span>
    <span class="toggle-show">Content is Open!</span>
    </summary>
    <div style="--my: 0.5rem">Hello there.</div>
</details>
</figure>

### 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`.

<figure class="demo-wrapper --resize" style="width: 500px;">
	<p class="truncate">This is very looooooooooooooooooooooooooooong text that can not fit on one line!</p>
</figure>

### 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.

[Dynamic CSS Utility]: /docs/concepts/dynamic-css-utilities
[Dynamic CSS Utilities]: /docs/concepts/dynamic-css-utilities

## 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.