Skip to content
Airframe

App shell

Dashboard chrome: nav + main, min-height: 100dvh, page canvas (--af-color-background). Sidebar width is --af-sidebar-width (default 16rem). Stacks on small screens; row from lg (1024px). Overlay mobile menus use Drawer and --af-drawer-width instead.

Distinct from Sidebar (af-sidebar), which is an in-page content + aside grid.

Class reference

Section titled “Class reference”
ClassPurposeExample
af-appApp shell (dashboard chrome)<div class="af-app">
af-app__sidebarOptional sidebar region<aside class="af-app__sidebar">
af-app__mainOptional main region<main class="af-app__main">
af-app af-is-collapsedIcon rail from lg (--af-sidebar-collapsed-width)<div class="af-app af-is-collapsed">

Example

Section titled “Example”

Main

<div class="af-app">
  <aside class="af-app__sidebar">
    <nav class="af-side-nav" aria-label="App">…</nav>
  </aside>
  <main class="af-app__main">
    <div class="af-container">…</div>
  </main>
</div>

Override width:

Main

:root { --af-sidebar-width: 18rem; }

Semantic children (<aside>, <nav>, <main>) work without BEM parts.

af-app has no header part. Put search or account chrome inside af-app__main. The app blueprints do this.

Collapsed rail

Section titled “Collapsed rail”

From lg (1024px), af-is-collapsed shrinks the sidebar to --af-sidebar-collapsed-width (default 3.5rem). Wrap link text in af-side-nav-label so it hides; keep an icon in af-side-nav-link. App JavaScript toggles the class. Below lg the shell still stacks and labels stay visible.

Main. Toggle af-is-collapsed in your app JS.

<div class="af-app af-is-collapsed">
  <aside class="af-app__sidebar">
    <nav class="af-side-nav" aria-label="App">
      <ul>
        <li class="af-side-nav-item">
          <a class="af-side-nav-link" href="#" aria-current="page">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
            </svg>
            <span class="af-side-nav-label">Home</span>
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="af-app__main">…</main>
</div>

For settings-style section nav inside the shell, see Nav Pills and the settings blueprint.

Section titled “Related”