Skip to content
Airframe

Coming from Bootstrap or Tailwind

Already know Bootstrap or Tailwind? Airframe gives you cleaner markup, better readability, and runtime theming with no build step.

Why Airframe?

Section titled “Why Airframe?”

Readable DOM

Section titled “Readable DOM”

Airframe favors semantic layout recipes over atomic utility classes:

<!-- Tailwind: Hard to read -->
<div class="flex flex-col gap-4 p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-2xl font-bold mb-2">
    Card Title
  </h2>
  <p class="text-gray-600">
    Card content
  </p>
</div>
<!-- Bootstrap: Verbose -->
<div class="card shadow-sm">
  <div class="card-body p-4">
    <h2 class="card-title mb-2">
      Card Title
    </h2>
    <p class="text-muted">
      Card content
    </p>
  </div>
</div>
<!-- Airframe: Clean and readable -->
<div class="af-card af-stack af-gap-lg">
  <h2 class="af-card__title">
    Card Title
  </h2>
  <p class="af-card__body">
    Card content
  </p>
</div>

AI-Friendly

Section titled “AI-Friendly”

Semantic class names make it easier for AI assistants to understand and generate code:

  • af-stack → “vertical stack layout”
  • af-card__title → “card title element”
  • af-btn → “button component”

Runtime Theming

Section titled “Runtime Theming”

Override tokens with CSS variables — no build step required:

:root {
  --af-base-primary: #0ea5e9;
  --af-hover-mix: 12%;
}

[data-theme="dark"] {
  --af-base-primary: #38bdf8;
}

No Build Step

Section titled “No Build Step”

No JavaScript runtime, no build tooling required. Just CSS imports.

Common Conversions

Section titled “Common Conversions”

Layout Recipes

Section titled “Layout Recipes”
<!-- Tailwind -->
<div class="flex flex-col gap-4">
  <h1>
    Title
  </h1>
  <p>
    Content
  </p>
</div>
<!-- Bootstrap -->
<div class="d-flex flex-column gap-3">
  <h1>
    Title
  </h1>
  <p>
    Content
  </p>
</div>
<!-- Airframe -->
<div class="af-stack af-gap-lg">
  <h1>
    Title
  </h1>
  <p>
    Content
  </p>
</div>

Buttons

Section titled “Buttons”
<!-- Tailwind -->
<button class="px-4 py-2 bg-blue-500 text-white rounded">
  Click me
</button>
<!-- Bootstrap -->
<button class="btn btn-primary">
  Click me
</button>
<!-- Airframe -->
<button class="af-btn">
  Click me
</button>

Grid Layouts

Section titled “Grid Layouts”
<!-- Tailwind -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12 md:col-span-8">
    Main
  </div>
  <div class="col-span-12 md:col-span-4">
    Sidebar
  </div>
</div>
<!-- Bootstrap -->
<div class="row g-3">
  <div class="col-12 col-md-8">
    Main
  </div>
  <div class="col-12 col-md-4">
    Sidebar
  </div>
</div>
<!-- Airframe -->
<div class="af-grid af-gap-lg">
  <div class="af-col-span-8@md">
    Main
  </div>
  <div class="af-col-span-4@md">
    Sidebar
  </div>
</div>

Cheat Sheets

Section titled “Cheat Sheets”

For complete class-by-class mappings:

Next Steps

Section titled “Next Steps”