Usage

Start using semantic classes immediately after installation.

Basic Example

Card Title

Card content goes here.

Primary action

<div class="af-card">
  <h2 class="af-card__title">Card Title</h2>
  <p class="af-card__body">Card content goes here.</p>
  <a href="url" class="af-btn">Primary action</a>
</div>

Semantic HTML

Airframe styles semantic HTML by default. Many elements work without classes:

Main Heading

Section Heading

Email Submit

<!-- Headings are automatically styled -->
<h1>Main Heading</h1>
<h2>Section Heading</h2>

<!-- Forms work with minimal classes -->

<form class="af-form">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" />
  <button class="af-btn" type="submit">Submit</button>
</form>

Layout Recipes

Use structure classes for common composition:

Title

Content

Action

Save Cancel

<!-- Vertical stack -->
<section class="af-stack af-gap-lg">
  <h1>Title</h1>
  <p>Content</p>
  <button class="af-btn">Action</button>
</section>

<!-- Horizontal inline -->

<div class="af-inline af-gap-sm">
  <button class="af-btn">Save</button>
  <button class="af-btn af-is-secondary">Cancel</button>
</div>

Patterns

Airframe ships production-ready CSS-only patterns. Use the classes for common UI structures:

Card Title

Card content

Success message

Name

<!-- Card -->
<div class="af-card">
  <h3 class="af-card__title">Card Title</h3>
  <div class="af-card__body">Card content</div>
</div>

<!-- Alert -->

<div class="af-alert af-is-success">Success message</div>

<!-- Form field -->

<div class="af-field">
  <label class="af-field__label" for="name">Name</label>
  <input type="text" id="name" class="af-input" />
</div>

Responsive Design

Use responsive suffixes for breakpoint-specific styles:

Item 1

Item 2

Item 3

<!-- Grid that adapts to screen size -->
<div class="af-grid-1 af-grid-2@md af-grid-3@lg">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Resize your browser to see the grid adapt: 1 column on mobile, 2 on tablet, 3 on desktop.

Utilities

Use utility classes for spacing, typography, and more:

Content with padding and margin

Centered muted text

Hidden on small screens, visible on medium and up

<!-- Spacing -->
<div class="af-p-md af-m-lg">Content</div>

<!-- Typography -->

<p class="af-text-center af-text-muted">Centered muted text</p>

<!-- Display -->

<div class="af-hidden@sm af-block@md">Hidden on small screens</div>

Brand it in CSS. Override --af-* in your stylesheet. Theming.

Next steps

• Structure — arrange and compose UI
• Patterns — build the UI
• Blocks — section guides you can edit
• Blueprints — screen guides you can edit
• Theming — CSS variable overrides, dark mode, high contrast