Coming from Bootstrap or Tailwind

Already know Bootstrap or Tailwind? Swap the CSS, then swap classes.

Coming from your own UI kit (.ui-*, @your-scope/ui) instead? Do not run Airframe beside it. Wrap af-btn in <my-button>, map tokens once, and keep kit CSS for behaviour Airframe cannot do. Use as much as you need.

What the markup looks like

Airframe favors structure classes over atomic utility classes:

Card Title

Card content

<!-- Tailwind -->
<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 -->

<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 -->

<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>

:root {
  --af-base-primary: #0ea5e9;
}

Override tokens in CSS. No rebuild. Theming. Why the grammar looks like this: Why Airframe.

Cheat sheets

• Tailwind cheat sheet — layout, spacing, typography, and pattern translations
• Bootstrap cheat sheet — pattern, grid, and utility translations

Next steps

• Installation — get the CSS in your project
• Usage — first patterns and primitives
• Blueprints — complete screens built only with Airframe classes