Graffiti

github

CSS Utilities

These utility classes actually have utility.

We aren't replicating CSS with classnames, but providing real functionality to be combined or used individually. If you want a common layout or pattern or even automatic color contrast, we've got you.

Layouts

CSS Grid-based page layouts. All layouts are responsive by default.

When to use: Responsive page and panel layouts for app and content structure.

Classes: .layout-card, .layout-sidebar, .layout-split, .layout-three-col, .layout-readable

Reference Notes

Variants:

  • .layout-sidebar - 250px sidebar (default)
  • .layout-sidebar.narrow - 150px sidebar
  • .layout-sidebar.wide - 350px sidebar
  • .layout-sidebar.invert - Sidebar on right
  • .layout-sidebar.fill - Full app-shell frame (--layout-gap: 0, height: 100dvh)
  • .layout-sidebar.fixed - Sticky sidebar with scrolling main content
Split (50/50)

Add .no-stack to prevent stacking on mobile.

Three Column

Responsive: 3 cols → 2 cols → 1 col.

Readable Width

Max-width container for optimal reading:

Variants:

  • .layout-readable - Start-aligned
  • .layout-readable.center - Centered
  • .layout-readable.end - End-aligned

Full bleed child:

CSS Variables
  • --gap or --layout-gap - Gap between grid items
  • --min-card-width - Minimum card width for .layout-card
  • --max-width - Max width for .layout-readable
  • --padding - Inline padding for .layout-readable

Organization

Flexbox utilities for vertical and horizontal layouts.

When to use: Flow and grouping helpers for vertical/horizontal composition.

Classes: .stack, .cluster, .split, .split.vertical, .flex, .grid

Reference Notes
Default Properties

Stack:

  • display: flex
  • flex-direction: column
  • gap: 1rem
  • Resets child margins to 0

Cluster:

  • display: flex
  • flex-wrap: wrap
  • gap: 1rem
  • align-items: center

Split:

  • display: flex
  • justify-content: space-between
  • align-items: start
  • gap: 20px

Handy Stuff

Helper classes for common styling needs.

When to use: Common reset, visibility, width, and helper utilities.

Classes: .readable, .no-list, .circle, .row, .visually-hidden, .auto-color, .full, .fc

Reference Notes
Spacing

In forms and fieldsets, .row also works as a field-group wrapper (label + control + help text).

Width

Use .readable or .narrow when you also need max-width constraints.

Font Sizing

Utility classes for heading-style typography and fluid size tokens.

When to use: Applying type hierarchy styles to non-heading elements.

Classes: .h1, .h2, .h3, .h4, .h5, .h6, .fs-xs, .fs-base, .fs-s, .fs-m, .fs-l, .fs-xl, .fs-xxl, .fs-xxxl

Reference Notes

Use these classes when you need visual hierarchy without changing semantic HTML.

  • .h1-.h6 apply heading styles to any element.
  • .fs-* classes map directly to the fluid type scale (--fl).

Gradients

Curated gradient background and gradient text utility classes.

When to use: Adding branded visual emphasis to surfaces and headings.

Classes: .gradient-*, .gradient-text

Reference Notes

Gradient utilities provide complete, theme-aware color compositions.

  • Use .gradient-* on containers for expressive backgrounds.
  • Add .gradient-text to apply the same gradient treatment to text.