Documentation

Baseline, Tokens, Layouts, Behaviors is a methodology for structuring CSS so a product stays in step with its design system while both change. It comes as four layer packages on npm and a bundle that imports them in cascade order.

Every other page here is generated from the repository: the guide is its README, and the reference pages are read from the token JSON and the layer stylesheets. Each page says where it came from. For the ideas with live examples, start at the overview.

GuideRead the methodologyThe shift in thinking, the four layers, the modern CSS underneath, do’s and don’ts, and adopting it one layer at a time.@btlb/tokensBring your own tokensThe primitive and semantic tiers, overriding them, and building from your own W3C design tokens.ReferenceLook something upEvery token, every layout attribute and every state the 1.0.0 packages respond to.

Install

npm install @btlb/css

@import '@btlb/css';

The bundle declares the layer order once, @layer tokens, baseline, layouts, behaviors;, then imports each layer. To take only some layers, install them separately: @btlb/tokens, @btlb/baseline, @btlb/layouts and @btlb/behaviors. Baseline, Layouts and Behaviors all read tokens, so @btlb/tokens, or your own tokens with the same names, comes first.

Adopting it

None of this needs a rewrite. The guide suggests starting with tokens, then Baseline, then layout patterns, then attribute-driven state, and each step is useful on its own.