Fylgja CSS

https://fylgja.dev
Admin
Fylgja CSS is a modular, lightweight CSS library that provides base styles, design tokens, and...
Tokens:19,504
Snippets:359
Trust Score:7.6
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Fylgja Tokens

Source: https://fylgja.dev/library/tokens

Installation commands for various package managers.

```bash
npm install @fylgja/tokens
```

```bash
pnpm add @fylgja/tokens
```

```bash
npx fylgja@latest add tokens
```

--------------------------------

### Install Fylgja Toast

Source: https://fylgja.dev/library/components/toast

Installation commands for package managers and CDN link.

```bash
npm install @fylgja/toast
```

```bash
pnpm add @fylgja/toast
```

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

--------------------------------

### Install Fylgja Stylelint Config

Source: https://fylgja.dev/library/extensions/stylelint-config

Install the package as a development dependency in your project.

```bash
npm install @fylgja/stylelint-config --save-dev
```

--------------------------------

### Install Snap Slider via NPM

Source: https://fylgja.dev/library/extensions/snap-slider

Install the package using the npm CLI.

```bash
npm install @fylgja/snap-slider
```

--------------------------------

### Install via NPM

Source: https://fylgja.dev/library/extensions/alpinejs-dialog

Command to install the package via NPM.

```bash
npm install @fylgja/alpinejs-dialog
```

--------------------------------

### Install Input Group via package managers or CDN

Source: https://fylgja.dev/library/components/input-group

Choose the installation method that fits your project environment.

```bash
npm install @fylgja/input-group
```

```bash
pnpm add @fylgja/input-group
```

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

--------------------------------

### Install Fylgja Badge

Source: https://fylgja.dev/library/components/badge

Installation commands for different package managers and a CDN link.

```bash
npm install @fylgja/badge
```

```bash
pnpm add @fylgja/badge
```

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

--------------------------------

### Install Fylgja Card

Source: https://fylgja.dev/library/components/card

Installation commands for different package managers and CDN usage.

```bash
npm install @fylgja/card
```

```bash
pnpm add @fylgja/card
```

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

--------------------------------

### Install Fylgja Utilities

Source: https://fylgja.dev/library/utilities

Commands to install the package using various package managers.

```bash
npm install @fylgja/utilities
```

```bash
pnpm add @fylgja/utilities
```

```bash
npx fylgja@latest add utilities
```

--------------------------------

### Install Fylgja Props Builder

Source: https://fylgja.dev/library/extensions/props-builder

Use this command to install the package via npm or other Node-based package managers.

```bash
npm install @fylgja/props-builder
```

--------------------------------

### Install Fylgja meta package

Source: https://fylgja.dev/docs

Use npm to install the core Fylgja packages simultaneously.

```bash
npm install fylgja
```

--------------------------------

### Install Fylgja Form Extend

Source: https://fylgja.dev/library/components/form-extend

Installation methods for the package via npm, pnpm, or CDN.

```bash
npm install @fylgja/form-extend
```

```bash
pnpm add @fylgja/form-extend
```

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

--------------------------------

### Install Breadcrumbs Component

Source: https://fylgja.dev/library/components/breadcrumbs

Installation commands for various package managers and CDN usage.

```bash
npm install @fylgja/breadcrumbs
```

```bash
pnpm add @fylgja/breadcrumbs
```

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

--------------------------------

### Install Fylgja Base

Source: https://fylgja.dev/library

Installation commands for various package managers and the CDN link.

```bash
npm install @fylgja/base
```

```bash
pnpm add @fylgja/base
```

```bash
npx fylgja@latest add base
```

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

--------------------------------

### Create a Product Grid

Source: https://fylgja.dev/library/components/card

Example of using cards within a grid layout with hover effects.

```html
<div class="auto-grid gap" style="--max-col-size: 16rem">
	<article class="card --hover">
		<img
			src="/images/placeholders/cat.webp"
			alt="Sunny Cat Wallpaper"
			width="500"
			height="300"
			loading="lazy"
		/>
		<p class="lead"><strong>Sunny Cat Wallpaper</strong></p>
		<p>Dicta ea a, commodi reiciendis aut doloremque earum fugit ducimus officiis.</p>
		<p class="font-bold">€18.99</p>
		<form action="#" class="flex-wrap gap align">
			<input type="hidden" name="product-id" value="demo-id"/>
			<button>Add to Cart</button>
		</form>
	</article>
	...
</div>
```

--------------------------------

### Install Fylgja TailwindCSS

Source: https://fylgja.dev/library/extensions/preset-tailwind

Install the package along with its required peer dependencies.

```bash
npm install @fylgja/tailwindcss

# Peer dependencies
npm install @fylgja/base @fylgja/tokens @fylgja/utilities
```

--------------------------------

### Install Fylgja Base via package managers

Source: https://fylgja.dev/library/base

Commands to install the package using npm, pnpm, or the Fylgja CLI.

```shell
npm install @fylgja/base
```

```shell
pnpm add @fylgja/base
```

```shell
npx fylgja@latest add base
```

--------------------------------

### Create a Media Card

Source: https://fylgja.dev/library/components/card

Layout example using a card with an image and text content.

```html
<article class="card md:flex">
	<picture class="flex-none">
		<source srcset="/images/placeholders/deer.webp" media="(width />= 768px)"/>
		<img
			src="/images/placeholders/deer-wide.webp"
			alt="Exploring Fylgja in the Wilds"
			width="740"
			height="240"
			loading="lazy"
			class="object-cover"
			style="--size-y: 240px; --md_size-x: 320px"
		/>
	</picture>
	<div class="card-content">
		<h3 class="lead">Exploring Fylgja in the Wilds</h3>
		<p class="line-clamp">...</p>
		<p><a href="#">Read More</a></p>
	</div>
</article>
```

--------------------------------

### Install Fylgja CSS Skill for AI Agents

Source: https://fylgja.dev/docs/intergrations/ai-support

Commands to download and install the Fylgja SKILL.md file into local configuration directories for various AI coding assistants.

```bash
gemini skills install https://github.com/fylgja/fylgja --path ai-skill
```

```bash
mkdir -p .claude/skills/fylgja
curl -o .claude/skills/fylgja/SKILL.md https://raw.githubusercontent.com/fylgja/fylgja/main/ai-skill/SKILL.md
```

```bash
mkdir -p .cursor/skills/fylgja
curl -o .cursor/skills/fylgja/SKILL.md https://raw.githubusercontent.com/fylgja/fylgja/main/ai-skill/SKILL.md
```

```bash
mkdir -p .github/skills/fylgja
curl -o .github/skills/fylgja/SKILL.md https://raw.githubusercontent.com/fylgja/fylgja/main/ai-skill/SKILL.md
```

```bash
mkdir -p .YOUR_AGENT_FOLDER/skills/fylgja
curl -o .YOUR_AGENT_FOLDER/skills/fylgja/SKILL.md https://raw.githubusercontent.com/fylgja/fylgja/main/ai-skill/SKILL.md
```

--------------------------------

### Basic Usage Example

Source: https://fylgja.dev/library/extensions/props-builder

Minimal implementation using a plain JavaScript object to generate a CSS file.

```javascript
import { propsBuilder } from "@fylgja/props-builder";

propsBuilder(
	{
		color: {
			red: "#f00",
			green: "#0f0",
			blue: "#00f",
		}
	},
	"output.css"
);
```

--------------------------------

### Apply Divide Utility

Source: https://fylgja.dev/library/utilities

Example of using the divide-y utility with the flow utility on a list.

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

--------------------------------

### Install Fylgja Sass

Source: https://fylgja.dev/library/extensions/sass-extend

Install the package via npm to access the library functions.

```bash
npm install @fylgja/sass
```

--------------------------------

### Import Fylgja core packages

Source: https://fylgja.dev/docs

Include the core packages in your main CSS file after installation.

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

--------------------------------

### Add Fylgja files via npx

Source: https://fylgja.dev/docs

Copy individual CSS files into your project without a formal installation.

```bash
npx fylgja@latest add theme
```

--------------------------------

### Copy CSS files locally with npx

Source: https://fylgja.dev/docs/concepts/buildless

Use this command to fetch specific Fylgja CSS files into your project directory without permanent installation.

```bash
npx fylgja@latest add tokens
```

--------------------------------

### Example of classless styling

Source: https://fylgja.dev/docs

HTML elements styled automatically by the @fylgja/base package without additional classes.

```html
<article>
  <h2>My First Fylgja Article</h2>
  <p>This content is styled by the classless <b>@fylgja/base</b> package.</p>
  <button>Click Me</button>
</article>
```

--------------------------------

### Include Fylgja via CDN

Source: https://fylgja.dev/docs/concepts/buildless

Link directly to Fylgja CSS files in your HTML to start using components immediately without local file management.

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

--------------------------------

### Generated CSS Output

Source: https://fylgja.dev/library/extensions/props-builder

The resulting CSS file content produced by the basic usage example.

```css
:where(:root) {
	--color-red: #f00;
	--color-green: #0f0;
	--color-blue: #00f;
}
```

--------------------------------

### Apply Theme Styles

Source: https://fylgja.dev/library

Import pre-defined theme styles or add them to your project for customization.

```css
@import "@fylgja/base/theme.css";
```

```bash
npx fylgja@latest add theme
```

--------------------------------

### Import Tokens

Source: https://fylgja.dev/library/tokens

Import the full package in JavaScript or CSS.

```javascript
import tokens from "@fylgja/tokens";
```

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

--------------------------------

### Creating a Build Script

Source: https://fylgja.dev/library/extensions/props-builder

Node.js script template for reading a JSON tokens file and executing the builder.

```javascript
import { readFileSync } from "node:fs";
import { propsBuilder } from "@fylgja/props-builder";

// Read and parse the JSON file
const tokens = JSON.parse(readFileSync("path/to/your/tokens.json", "utf-8"));

// 👇 Configure the builder based on your token format
const options = {
    // inputTypeTokens: ...,
    // inputTypeSyntax: ...,
};

// Build the CSS file
propsBuilder(tokens, "tokens.css", options);

console.log("Successfully built tokens.css!");
```

--------------------------------

### Import Toast Styles

Source: https://fylgja.dev/library/components/toast

Import the full package or specific modules in your CSS.

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

--------------------------------

### Importing a single utility

Source: https://fylgja.dev/library/utilities

Use this syntax to import specific utilities individually instead of the entire package.

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

--------------------------------

### Initialize Plugin

Source: https://fylgja.dev/library/extensions/alpinejs-dialog

Register the plugin with Alpine.js in your project bundle.

```javascript
import Alpine from 'alpinejs';
import dialog from '@fylgja/alpinejs-dialog';

window.Alpine = Alpine;

Alpine.plugin(dialog);
Alpine.start();
```

--------------------------------

### Builder Configuration Options

Source: https://fylgja.dev/library/extensions/props-builder

Specific configuration objects for different design token formats.

```javascript
const options = {};
```

```javascript
const options = { inputTypeTokens: true };
```

```javascript
const options = {
    inputTypeTokens: true,
    inputTypeSyntax: "figma"
};
```

```javascript
const options = {
    inputTypeTokens: true,
    inputTypeSyntax: "stitch"
};
```

--------------------------------

### Running the Build Script

Source: https://fylgja.dev/library/extensions/props-builder

Terminal command to execute the build script.

```bash
node build.js
```

--------------------------------

### Import Shadow DOM Tokens

Source: https://fylgja.dev/library/tokens

Use .host variants for tokens within Shadow DOM components.

```css
@import "@fylgja/tokens/css/aspect-ratio.host.css";
```

--------------------------------

### Include via CDN

Source: https://fylgja.dev/library/tokens

Directly link the CSS file in your HTML.

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

--------------------------------

### Compare dynamic variables with traditional utility classes

Source: https://fylgja.dev/docs/concepts/dynamic-css-utilities

Demonstrates how CSS variables handle responsive spacing compared to generating multiple utility classes.

```html
<div style="--my: 1rem; --lg_my: var(--size-4)">...</div>
<!-- vs -->
<div class="my-4 lg:my-8">...</div>
```

--------------------------------

### Configure Stylelint

Source: https://fylgja.dev/library/extensions/stylelint-config

Set the Stylelint configuration to extend the Fylgja ruleset.

```json
{
  "extends": "@fylgja/stylelint-config"
}
```

--------------------------------

### Import Fylgja Base theme

Source: https://fylgja.dev/library/base

Apply the default theme styles by importing the theme CSS file.

```css
@import "@fylgja/base/theme.css";
```

--------------------------------

### Basic Usage

Source: https://fylgja.dev/library/extensions/alpinejs-dialog

Use x-htmldialog on a dialog element controlled by x-show.

```html
<div x-data="{ open: false }">
    <button @click="open = !open">Open</button>
    <dialog x-show="open" x-htmldialog="open = false">..</dialog>
</div>
```

--------------------------------

### Import Utilities in CSS

Source: https://fylgja.dev/library/utilities

Import the full package or specific utility modules into your stylesheet.

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

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

--------------------------------

### Implement Basic Breadcrumbs

Source: https://fylgja.dev/library/components/breadcrumbs

Use a nav element with an ordered list and the breadcrumbs class for semantic navigation.

```html
<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#" aria-current="page">Current Page</a></li>
  </ol>
</nav>
```

--------------------------------

### Include via CDN

Source: https://fylgja.dev/library/extensions/alpinejs-dialog

Load the plugin via script tags, ensuring it is included before Alpine.js.

```html
<script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Import Fylgja Form Extend

Source: https://fylgja.dev/library/components/form-extend

Import the full package or specific component modules into your project.

```css
@import "@fylgja/form-extend";
```

--------------------------------

### Include Snap Slider via CDN

Source: https://fylgja.dev/library/extensions/snap-slider

Load the Custom Element or AlpineJS version directly in the HTML.

```html
<script defer src="https://unpkg.com/@fylgja/snap-slider/dist/custom-element/cdn.min.js"></script>
```

```html
<script defer src="https://unpkg.com/@fylgja/snap-slider/dist/alpine/cdn.min.js"></script>
```

--------------------------------

### Import Badge Styles

Source: https://fylgja.dev/library/components/badge

Import the full badge package into your CSS project.

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

--------------------------------

### Import Input Group styles

Source: https://fylgja.dev/library/components/input-group

Include the full package or specific sub-modules in your CSS.

```css
@import "@fylgja/input-group";
```

--------------------------------

### Import Fylgja Card

Source: https://fylgja.dev/library/components/card

Import the full package or specific modules for custom builds.

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

--------------------------------

### Define Viewport Media Queries

Source: https://fylgja.dev/library/tokens

Custom media query definitions for viewport sizes and orientation using PostCSS syntax.

```css
--{sm,md,lg,xl,xxl}: (width >= *);
--{sm,md,lg,xl,xxl}-max: (width < *);
--portrait: (orientation: portrait);
--landscape: (orientation: landscape);
```

--------------------------------

### propsBuilder(props, filename, options)

Source: https://fylgja.dev/library/extensions/props-builder

Generates output files based on provided design tokens and configuration options.

```APIDOC
## propsBuilder(props, filename, options)

### Description
Generates an output file (e.g., CSS) from a JavaScript object containing design tokens.

### Parameters
- **props** (Object) - Required - JavaScript object containing design tokens.
- **filename** (String) - Required - Name of the output file.
- **options** (Object) - Optional - Configuration object for the builder.
    - **parseAs** (String) - Optional - Specifies the output format. Defaults to "auto".
    - **writeToFile** (Boolean) - Optional - If false, outputs content to console. Defaults to true.
    - **selector** (String) - Optional - CSS selector for custom property declarations. Defaults to ":where(:root)".
    - **wrapper** (String) - Optional - Wrapper for design system-specific formatting.
    - **banner** (String) - Optional - Prepended to the output as-is.
    - **inputTypeTokens** (Boolean) - Optional - Set to true if input props are in a design token format. Defaults to false.
    - **inputTypeSyntax** (String) - Optional - Specifies the syntax of input tokens if inputTypeTokens is true.
    - **stripPrefix** (String) - Optional - Dot/dash separated key path to unwrap.
    - **rename** (Object) - Optional - Map of { [currentKey]: newKey } to align naming.

### Usage Example
```javascript
import { propsBuilder } from "@fylgja/props-builder";

propsBuilder(
	{ color: { red: "#f00" } },
	"output.css",
	{ selector: ":where(:root)" }
);
```

--------------------------------

### Import Fylgja Base in CSS

Source: https://fylgja.dev/library/base

Import the full package or specific modules into your stylesheet.

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

--------------------------------

### Configuring Props Builder

Source: https://fylgja.dev/library/extensions/props-builder

Full configuration options available when calling the propsBuilder function.

```javascript
import { propsBuilder } from "@fylgja/props-builder";

propsBuilder(
	props, // Required: JavaScript object containing your design tokens.
    filename, // Required: Name of the output file.
    {
        parseAs: "auto", // Optional: Specifies the output format. Defaults to "auto".
        writeToFile: true, // Optional: If false, outputs the generated content to the console. Defaults to true.
        selector: ":where(:root)", // Optional: CSS selector for custom property declarations (CSS output only).
        wrapper: "", // Optional: Wrapper for design system-specific formatting (e.g., Figma).
        banner: "", // Optional: Prepended to the output as-is, e.g. for a license header.
        inputTypeTokens: false, // Optional: Set to true if the input `props` are in a design token format. Defaults to false.
        inputTypeSyntax: "default", // Optional: Specifies the syntax of the input tokens if `inputTypeTokens` is true.
        stripPrefix: "", // Optional: Dot/dash separated key path (or array of keys) to unwrap, dropping wrapping keys (e.g. "tokens.values").
        rename: null, // Optional: Map of `{ [currentKey]: newKey }` applied recursively, to align naming (e.g. `{ colors: "color" }`).
    }
)
```

--------------------------------

### Define System Preference Media Queries

Source: https://fylgja.dev/library/tokens

Media queries for system-level preferences such as color scheme, motion, and contrast.

```css
--hd-color: (dynamic-range: high);
--scheme-{dark,light}: (prefers-color-scheme: *);
--motion-{safe,reduce}: (prefers-reduced-motion: *);
--opacity-{safe,reduce}: (prefers-reduced-transparency: *);
--data-{safe,reduce}: (prefers-reduced-data: *);
--contrast-{more,less}: (prefers-contrast: *);
```

--------------------------------

### Configure Grid Columns with CSS Variables

Source: https://fylgja.dev/library/utilities

Use the grid-cols utility to define responsive column layouts. CSS variables allow for dynamic column counts and span adjustments.

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

--------------------------------

### Define Capability Media Queries

Source: https://fylgja.dev/library/tokens

Media queries for detecting input capabilities like touch, stylus, and mouse.

```css
--touch: (hover: none) and (pointer: coarse);
--stylus: (hover: none) and (pointer: fine);
--pointer: (hover) and (pointer: coarse);
--mouse: (hover) and (pointer: fine);
```

--------------------------------

### Include Fylgja Base via CDN

Source: https://fylgja.dev/library/base

Directly link the minified CSS file in your HTML document.

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

--------------------------------

### Display pre-formatted text

Source: https://fylgja.dev/library/base/demo

Displays text exactly as written, preserving whitespace and line breaks.

```text
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z  ~ 

```

--------------------------------

### Create Interactive Sliders with Snap

Source: https://fylgja.dev/library/utilities

Combine snap, scroll-x, and grid utilities to create scrollable, snapping slider components.

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

--------------------------------

### Import Breadcrumbs Styles

Source: https://fylgja.dev/library/components/breadcrumbs

Import the full package styles into your project.

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

--------------------------------

### Import Fylgja TailwindCSS

Source: https://fylgja.dev/library/extensions/preset-tailwind

Import the full package into your CSS file.

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

--------------------------------

### Importing Props Builder

Source: https://fylgja.dev/library/extensions/props-builder

Basic import statement for the propsBuilder function in Node.js.

```javascript
import { propsBuilder } from "@fylgja/props-builder";
```

--------------------------------

### Import and Use Custom Element

Source: https://fylgja.dev/library/extensions/snap-slider

Import the custom element and use the <snap-slider> tag with a data-track child.

```javascript
import '@fylgja/snap-slider/custom-element';
```

```html
<snap-slider>
    <div data-track>
        <!-- Your slides go here -->
    </div>
</snap-slider>
```

--------------------------------

### SnapSlider Instance Methods

Source: https://fylgja.dev/library/extensions/snap-slider

Methods available on the SnapSlider instance retrieved from the custom element.

```APIDOC
## SnapSlider Methods

### init()
Initializes the slider. This is called automatically.

### destroy()
Removes all event listeners and observers.

### refreshSlides()
Re-initializes the slider, useful when slides are added or removed dynamically. A built-in MutationObserver already calls this automatically when slides are added or removed, so manual calls are rarely needed.
```

--------------------------------

### Configure AlpineJS Snap Slider

Source: https://fylgja.dev/library/extensions/snap-slider

Apply boolean configuration options as modifiers to the x-snap-slider directive.

```html
<div x-data x-snap-slider.auto-pager.group-pager.loop.force-pager>
    ...
</div>
```

--------------------------------

### Apply predefined utility classes

Source: https://fylgja.dev/docs/concepts/dynamic-css-utilities

Define custom classes in your stylesheet that set CSS variables for consistent, reusable styling.

```html
<div class="auto-grid grid-size-lg">...</div>
```

--------------------------------

### Register and Use AlpineJS Component

Source: https://fylgja.dev/library/extensions/snap-slider

Register the plugin with Alpine and apply the x-snap-slider directive to the container.

```javascript
import Alpine from 'alpinejs';
import snapSlider from '@fylgja/snap-slider/alpine';

window.Alpine = Alpine;

Alpine.plugin(snapSlider);
Alpine.start();
```

```html
<div x-data x-snap-slider>
    <div data-track>
        <!-- Your slides go here -->
    </div>
</div>
```

--------------------------------

### Create a checkbox toolbar

Source: https://fylgja.dev/library/components/input-group

Use the btn class to hide inputs and style labels as interactive elements within a merged group.

```html
<div class="input-group --merge">
	<label class="btn">
		<input type="checkbox"/>
		Mute
	</label>
	<label class="btn">
		<input type="checkbox"/>
		Pause
	</label>
</div>
```

--------------------------------

### Integrate dynamic variables with PHP

Source: https://fylgja.dev/docs/concepts/dynamic-css-utilities

Inject server-side values directly into CSS variables to enable dynamic styling based on application logic.

```php
<div class="auto-grid" style="--max-cols-size: <?= $productMaxGridSize ?>">...</div>
```

--------------------------------

### Create a star rating system

Source: https://fylgja.dev/library/components/input-group

Apply the --steps modifier to radio buttons to create a range-like input interface.

```html
<fieldset>
	<legend>Your Rating</legend>
	<div class="input-group --steps">
		<label>
			<svg ...><use href="#star" /></svg>
			<input type="radio" name="demo-star-rating"/>
		</label>
		...
	</div>
</fieldset>
```

--------------------------------

### AlpineJS Integration

Source: https://fylgja.dev/library/extensions/snap-slider

Using the x-snap-slider directive with AlpineJS modifiers for boolean configuration options.

```APIDOC
## AlpineJS x-snap-slider

### Description
For AlpineJS, boolean options are passed as modifiers to the `x-snap-slider` directive.

### Usage Example
<div x-data x-snap-slider.auto-pager.group-pager.loop.force-pager>
    ...
</div>
```

--------------------------------

### Extend and Override Rules

Source: https://fylgja.dev/library/extensions/stylelint-config

Modify existing rules or add new ones by including a rules key in your configuration.

```json
{
  "extends": "@fylgja/stylelint-config",
  "rules": {
    "selector-class-pattern": null
  }
}
```

--------------------------------

### Closeby Configuration

Source: https://fylgja.dev/library/extensions/alpinejs-dialog

Control dismissal behavior via HTML attribute or directive modifier.

```html
<dialog closeby="any" ...>
```

```html
<dialog x-htmldialog.closeby.any ...>
```
Tokens:
Raw