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”| Class | Purpose | Example |
|---|---|---|
af-app | App shell (dashboard chrome) | <div class="af-app"> |
af-app__sidebar | Optional sidebar region | <aside class="af-app__sidebar"> |
af-app__main | Optional main region | <main class="af-app__main"> |
Example
Section titled “Example”<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:
:root { --af-sidebar-width: 18rem; }Semantic children (<aside>, <nav>, <main>) work without BEM parts. Collapse/drawer behaviour is kit JS — Airframe stays CSS.
For settings-style section nav inside the shell, see Nav Pills.