Layouts
Every layout.
13 page shapes and application layouts, from the shell that frames an app to the panes inside it.
Pages 8
- Container and stacksPage width is φ⁹ rem; text measure is 40ch·φ. Stack and cluster carry the rhythm.
- SplitTwo columns in 1 : φ, wrapping when narrower than twice the basis.
- Grid, bento, masonryAuto-fit grids with a φ⁶ minimum, dense bento spans, and CSS-columns masonry.
- Switcher and rowSide by side until the container is narrower than --threshold, then stacked; or equal columns in a row.
- Content with asideAn article beside a sticky aside, on either side; stacks under 64rem.
- Cover and centreFull-height pages: a cover with header and footer and a centred middle, or one centred thing.
- PanesTwo full-height panes in 1 : φ. The quiet side and the working side.
- ProseLong-form text with its rhythm on φ and headings one step down from the page scale.
Application 5
- ShellOne .shell, seven attributes. The sidebar is a container: narrow it and it becomes a rail by itself; leave it out and its column goes too.
- SettingsPreference rows: label and description at the start, the control at the end.
- Master–detailA list beside its detail. Under 48rem only one shows, chosen with data-view.
- Page, bleed, overlayA sticky-footer page, a full-bleed section, and an overlay that covers its parent.
- Snap sectionsFull-screen sections that snap on scroll, for presentations and landing stories.