Layout

Every gap derives from one 1.5rem line-height unit, and layouts arrange themselves from the space they are given. The principle behind this is described under Foundations.

Spacing

Static steps are fractions and multiples of the unit: 3xs is an eighth of it, m is one, 4xl is four times it. Fluid pairs grow with the viewport between two steps, for padding and gaps that should breathe.

Static scalefractions and multiples of one unit

Fluid pairsgrow with the viewport between two steps, for padding and gaps that should breathe

Measure

Line length is a token too, in characters. Text should be capped by a measure, not by a column.

Primitives

Small layout building blocks, each a class with one job. They use gap instead of margins and adapt to their container. Compose them rather than writing new layout CSS.

Stack.stack

Vertical flow with a consistent gap. data-gap picks xs, s, l or xl.

OneTwoThree

Cluster.cluster

A horizontal group that wraps, for tags, buttons and breadcrumbs.

TagAnother tagLonger tagTagMoreTags

Switcher.switcher

Equal-width items that switch from a row to a column when they no longer fit.

OneTwoThree

Auto grid.auto-grid

A grid that adds columns as room allows. data-min sets the minimum column width.

OneTwoThreeFour

PrimitiveClassWhat it does

Center wrap.center-wrapCaps the width at --sn-page-max-width, centres it and adds gutters.

Flow.flowSpaces running content with a margin between siblings.

Page grid.page-gridA full-bleed grid with named column lines: content, wide and full.

Frame.frameCrops media to an aspect ratio with object-fit: cover.

<div class="stack" data-gap="l">
  <h2>Title</h2>
  <div class="cluster"><span>Tag</span><span>Tag</span></div>
  <div class="auto-grid" data-min="16rem">…</div>
</div>

Page and containers

The page has a maximum width and a fluid gutter, and container query sizes are tokens so components share the same thresholds. Name a container, then query it.

Custom properties cannot be used inside a container query condition, so the container sizes are values to copy into @container rules.

Radius, ratios and layers

Shape, proportion and stacking are tokens as well. Pair any use of a layer with isolation so stacking stays local.

Focus

Keyboard focus is a token too: outline width, offset and colour, so every focus ring in the system looks the same.