Skip to content
Airframe

Structure

Structure is how Airframe arranges UI. Two kinds:

Primitives — how children relate. Stack, inline, grid.

Shells — how the viewport is divided. App chrome, cover, document column.

A visual index with live previews lives on the structure gallery.

Prefer these classes over display utilities (af-flex, af-justify-*). Reach for Display & Alignment only when a primitive is not enough.

Primitives

Section titled “Primitives”

How children relate.

  • Stack — af-stack* — vertical column
  • Inline — af-inline* — horizontal wrap
  • Cluster — af-cluster — wrap + center alignment
  • Spread — af-spread — space-between
  • Center — af-center — center on both axes
  • Grid — af-grid* — equal columns and 12-column system
  • Sidebar — af-sidebar — in-page main + aside grid
  • Container — af-container* — max-width wrapper
  • Spacer — af-spacer-* — one-off vertical gap
  • Masonry — af-masonry* — experimental waterfall columns

Shells

Section titled “Shells”

How the viewport is divided. Distinct from primitives. A shell is not a complete screen — that is a blueprint.

  • App — af-app — dashboard chrome; af-is-collapsed for the icon rail
  • Cover — af-cover — full-viewport cover
  • Body — af-body — document column; pin a direct-child footer

Shells overview.

Section titled “Related”

Section and surface are patterns, not structure. See Section & Surface.

Next steps

Section titled “Next steps”