Utilities

This page provides an overview of all utility classes in @airframeui. Utilities are intentionally small and predictable.

Most utilities support breakpoint variants with @{bp} — see Responsive Suffix (Foundation).

Utility Categories

Color Utilities - Text, background, and border color utilities
Display & Alignment - Display, flexbox, and alignment utilities
Interaction & Overflow - Focus, hit area, cursor, pointer events, and overflow utilities
Layout Utilities - Layout helpers and sizing utilities
Motion — duration, easing, reduced motion
Position Utilities - Position and placement utilities
Print - Hiding, showing, and page-breaking for printed pages
Spacing Utilities - Padding and margin utilities
Typography — Semantic type defaults, text roles, and typography utilities
Visibility & State - Visibility, state helpers, accessibility, and border utilities
Z-index & layering — top layer vs --af-z-* scale

Utilities are intentionally minimal to keep DOM readable.
Prefer structure classes (af-stack, af-inline, af-grid) for larger composition.
Use responsive suffixes when needed: @xs/@sm/@md/@lg/@xl/@2xl.