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. Future: mobile page layouts.

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

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

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

Shells overview.

Related

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

• Display & Alignment — af-flex, af-justify-*, af-items-*
• Position — af-relative, af-absolute, insets
• Layout utilities — sizing, flex grow/shrink, order
• Responsive Suffix — @{bp} variants

Next steps

• Patterns — reusable UI pieces
• Blocks — section guides you can edit
• Blueprints — screen guides you can edit