Usage
Start using semantic classes immediately after installation.
Basic Example
Section titled “Basic Example”<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>Live Example
Section titled “Live Example”Semantic HTML
Section titled “Semantic HTML”Airframe styles semantic HTML by default. Many elements work without classes:
<!-- 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>Live Example
Section titled “Live Example”Main Heading
Section Heading
Layout Recipes
Section titled “Layout Recipes”Use layout recipes for common patterns:
<!-- 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>Live Example
Section titled “Live Example”Title
Content
Patterns
Section titled “Patterns”Use pattern classes for common UI structures:
<!-- 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>Live Example
Section titled “Live Example”Card Title
Card content
Success message
Responsive Design
Section titled “Responsive Design”Use responsive suffixes for breakpoint-specific styles:
<!-- 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>Live Example
Section titled “Live Example”Item 1
Item 2
Item 3
Resize your browser to see the grid adapt: 1 column on mobile, 2 on tablet, 3 on desktop.
Utilities
Section titled “Utilities”Use utility classes for spacing, typography, and more:
<!-- 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>Live Example
Section titled “Live Example”Content with padding and margin
Centered muted text
Hidden on small screens, visible on medium and up