Utilities
This page provides an overview of all utility classes in @airframeui. Utilities are intentionally small and predictable.
Responsive Suffix
Section titled “Responsive Suffix”Most utilities support responsive variants using the @{bp} suffix.
See the dedicated Responsive Suffix page for syntax,
breakpoints, and best practices.
Utility Categories
Section titled “Utility Categories”- Spacing Utilities - Padding and margin utilities
- Display & Alignment - Display, flexbox, and alignment utilities
- Color Utilities - Text, background, and border color utilities
- Typography — Semantic type defaults, text roles, and typography utilities
- Layout Utilities - Layout helpers, sizing, and density utilities
- Interaction & Overflow - Focus, cursor, pointer events, and overflow utilities
- Position Utilities - Position and placement utilities
- Visibility & State - Visibility, state helpers, accessibility, and border utilities
- Utilities are intentionally minimal to keep DOM readable.
- Prefer layout recipes (
af-stack,af-inline,af-grid) for larger composition. - Use responsive suffixes when needed:
@xs/@sm/@md/@lg/@xl/@2xl.