Primitives

Each primitive replaces the margins of its children with a gap, and adapts to the space it has rather than the screen size. That makes them work the same in a sidebar, a card or the full page.

Stack

.stack spaces its children vertically.

Cluster

.cluster puts its children in a row that wraps, for tags, buttons and toolbars.

With sidebar

.with-sidebar puts a fixed width first child next to fluid content. When the content would get narrower than half the row, the two stack. This docs page uses it for the menu.

.end puts the sidebar last.

Switcher

.switcher shows its children in one row while it is wider than --i-switcher-threshold (40rem), and in one column below it. There is never a two plus one wrap. More than four children always stack.

Nesting

Primitives nest freely. A common page: a stack of sections, with a cluster of buttons inside.

Variables