Layout

App Shell — .app-shell

Centered, max-width (960 px) page wrapper. Apply to the outermost page container. Provides 1 rem padding on all sides so content never touches the viewport edge on small screens.

Source file: styles/components/layout.css

The inner .app-header holds three horizontal zones: brand column (.app-brand), navigation row (.app-nav), and actions (.app-header-actions). At ≤768 px these collapse to a vertical stack.

Architecture

Brand
Primary Nav
Header Actions
Main Workspace Content

This layout is intended for product surfaces where identity, navigation, and actions stay persistent while content changes.

Open full-page app shell mock

My App

Manage your data

page content
<div class="app-shell">

  <header class="app-header">
    <div class="app-brand">
      <h1>My App</h1>
      <p class="app-byline">Manage your data</p>
    </div>

    <nav class="app-nav" aria-label="Main navigation">
      <a href="/dashboard" class="active">Dashboard</a>
      <a href="/subscriptions">Subscriptions</a>
      <a href="/import">Import</a>
    </nav>

    <div class="app-header-actions">
      <button class="btn btn-secondary btn-sm" type="button">Settings</button>
    </div>
  </header>

  <main>...</main>

</div>

Responsive Behaviour

Viewport App Header
>768 px Single row: brand / nav / actions side by side
≤768 px Stacked column: brand → nav → actions