Yeti

A CSS-first, native, zero-build layout and styling framework for the web. Seventeen layouts, three recipes, twenty components, one stylesheet, and almost no JavaScript.

  • Install

    One stylesheet, an optional module, and editor completion in one setting.

  • Layouts

    Seventeen primitives that measure their own width, never the screen.

  • Components

    Identity is a class, configuration is an attribute, state is native.

  • Responsive

    A threshold, not a breakpoint, and the three tools in the order to reach for them.

  • Theming

    Hues in, colours out; a theme is a file of token values.

  • From Foundation 6

    Every version 6 class and its Yeti equivalent, and the five habits that change.

Quick Start

# Install
npm install yeti-css

# Link the stylesheet
<link rel="stylesheet" href="node_modules/yeti-css/dist/yeti.css">

# Write plain HTML
<article class="card lift" data-raised>…</article>

What it is

  • No build step — plain CSS in cascade layers; your own styles win without a specificity fight
  • Container queries, not breakpoints — a component changes shape at its own width, chosen from six named stops
  • Native state — popovers, dialogs, details and ARIA do the opening and closing; five optional modules cover the rest
  • A manifest behind everything — every attribute and value is validated, completed in your editor, and published for assistants as llms.txt
  • Beta — class names, attributes, values and public tokens are frozen; the stability page says exactly what