DOCSEARCHbyAlgolia
Submit Docs

Fylgja CSS Library

website·Indexed 33 days ago

https://fylgja.dev/

A modular CSS library that emphasizes native HTML and design, providing context for LLMs through Fylgja Base and Fylgja Tokens.

Tokens
740
Snippets
3
Records
5
Agent score
19%

What's inside Fylgja

  1. Build UI components with Fylgja

    Fylgja prioritizes native HTML elements over custom component classes.

    • Native Elements: Use <button> or <a class="btn"> to inherit Fylgja Base styles. Visual styling (colors, states) is provided by @fylgja/base/theme.css.
    • Custom Components: For non-native UI needs, Fylgja provides lightweight CSS components including Badge, Breadcrumbs, Card, Form Extend, Input Group, and Toast.

  2. Apply Dynamic CSS Utilities

    Fylgja Utilities use a 'Dynamic CSS' approach where a single utility class (or no class) is combined with inline CSS variables to control behavior, rather than using a large set of predefined utility classes.

    • Spacing: Margin and padding can be set directly via inline variables without a class.
    • Breakpoints: Responsive values are applied by prefixing the variable with the breakpoint name (e.g., lg_).
    npm install @fylgja/utilities
    @import "@fylgja/utilities";
/* Or granularly */
@import "@fylgja/utilities/flex.css";
    <!-- Using a utility class with a variable -->
<div class="align" style="--align: center"></div>

<!-- Using auto-grid with a variable -->
<div class="auto-grid" style="--max-cols-size: 15ch"></div>

<!-- Spacing without classes -->
<div style="--my: 1rem; --px: 2rem"></div>

<!-- Responsive spacing (lg breakpoint) -->
<div style="--my: 1rem; --lg_my: var(--size-4)"></div>

  3. Install and configure Fylgja Base

    Fylgja Base provides class-less CSS solutions for native HTML elements. It allows developers to style sites using plain HTML without adding utility classes. To apply a pre-defined theme (including dark mode and brand colors), import the theme CSS. Customization of the theme can be performed via the CLI.
    npm install @fylgja/base
    /* Full import */
@import "@fylgja/base";

/* Theme import for colors and dark mode */
@import "@fylgja/base/theme.css";

/* Granular imports */
@import "@fylgja/base/preflight.css"; // Typography and tables
@import "@fylgja/base/btn.css";       // Button styles + .btn class
@import "@fylgja/base/form.css";      // Form styles
@import "@fylgja/base/dialog.css";    // Dialog and popover styles
    # Customize the theme
npx @fylgja/base

  4. Use Fylgja Design Tokens

    Fylgja Tokens provide a consistent design language via CSS variables for colors, typography, media queries, and layout. Colors are dynamic and modified via --hue and --chroma. Media queries are defined as @custom-media (e.g., --md, --scheme-dark).
    npm install @fylgja/tokens
    /* Full import */
@import "@fylgja/tokens/css";

/* Granular import example */
@import "@fylgja/tokens/css/colors.css";

  5. Integrate Fylgja Extensions

    Fylgja offers optional extensions to integrate with other frameworks and tools:

    • Frameworks: AlpineJS Dialog (directives for native dialogs), Preset TailwindCSS, and Preset UnoCSS (for token integration).
    • Tooling: Props Builder (CSS custom-property APIs), Sass Extend (mixins/helpers), and Stylelint Config.
    • UI: Snap Slider (native CSS scroll-snap slider).