patterns
Shell
The app frame stacks at 672. The language site stacks at 1312. Section tabs wrap at 1056. A long catalog is a select.
two frames
.tz-shell is the app: brand in the sidebar column, topbar beside it, nav under brand, main scrolling, status full width. It stacks below 672px — nav becomes a horizontal strip, never a hamburger. .tz-shell--site is this language site: the topbar is full-bleed and the brand lives inside it. It stacks below 1312px so a laptop measure does not keep a 236px sidebar. Four section tabs wrap onto their own row below 1056px. A long catalog is a select whose label is the current page. The sidebar follows the active tab.
app · 672
site · 1312
contract
Viewport is layout. Density is data-density. A coarse pointer is a hit-target floor. Do not drive one from the other. .tz-shell--flat drops brand and nav for a sign-in or a 404 — same topbar and status, one region fewer.
| cut | columns | app shell | site shell |
|---|---|---|---|
| < 672 | 4 | stacks; nav is a strip | already stacked |
| 672–1055 | 8 | sidebar holds | stacked; tabs on a second row; catalog is a select |
| 1056–1311 | 16 | full frame | stacked; catalog is a select |
| ≥ 1312 | 16 | full frame | sidebar holds |