Structure

Arrange UI. Primitives and shells.

How children relate. How the viewport is divided. Prefer these classes over display utilities.

Classes on markup. No runtime. Each card opens the docs for that class.

Grammar

A small set of concepts. Combine them.

Stack af-stack Inline af-inline Grid af-grid Center af-center Sidebar af-sidebar Container af-container Cluster af-cluster Spread af-spread Spacer af-spacer-* Masonry af-masonry App af-app Cover af-cover

Primitives

How children relate.

Stack

Vertical column.

af-stack

Inline

Horizontal wrap.

af-inline

Grid

Equal columns, or 12-column spans.

af-grid

Center

Center on both axes.

af-center

Sidebar

In-page main + aside grid.

af-sidebar

Container

Max-width wrapper.

af-container

Cluster

Wrap and center-align.

af-cluster

Spread

Opposite ends.

af-spread

Spacer

One-off vertical gap.

af-spacer-*

Masonry

Experimental waterfall columns.

af-masonry

Shells

How the viewport is divided.

App

Dashboard chrome. Nav + main.

af-app

Cover

Full-viewport cover.

af-cover

Need pieces or a screen?

Structure arranges. Buttons, cards and inputs live in patterns. Sections live in blocks. Complete screens live in blueprints.

Patterns Blocks Blueprints