Yeti

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

  • Install

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

  • Base

    What plain HTML looks like before a single class: the reset, the type, the controls.

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

  • Visibility

    Every way to hide something, the platform’s first and Yeti’s second.

  • Color

    Six hues, a greyscale that flips with the scheme, and a color by name on anything.

  • Theming

    Hues in, colors 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

Yeti is not released yet, so there is nothing to install. The installing guide will carry the npm, download and CDN instructions once there is a release; until then it says how to build dist/ from the repository. Everything else on this site is live, and the markup is already what it will be:

<!-- The stylesheet, and the modules for the few things CSS cannot do -->
<link rel="stylesheet" href="yeti.css">
<script type="module" src="yeti.js"></script>

<!-- Then plain HTML -->
<div class="stack" data-gap="sm">
  <h1>Hello</h1>
  <div class="dropdown">
    <button class="button" type="button" popovertarget="menu">Menu</button>
    <div id="menu" popover>…</div>
  </div>
</div>

To see the whole vocabulary at work, the examples at the foot of the sidebar are whole pages, an exhibition, an article, a landing page, a dashboard and a settings screen, built with nothing but Yeti's layouts, components and attributes and validated against the manifest like every demo on this site.

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; nine optional modules cover the rest
  • A manifest behind everything — every attribute and value is validated, completed in your editor, listed with every token, and published for assistants as llms.txt
  • Beta — class names, attributes, values and public tokens are frozen; the stability page says exactly what