10.02 · App Platform / Shell anatomy

Topbar. Rail. Main. Optional panel.

Every Diray app surface starts with the same four-region grid. Fixed chrome, scrollable main, optional right column for activity or detail.

The four regions

Defined by a CSS grid template area, so the regions auto-size and don't fight with their content.

.app-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  grid-template-areas:
    "rail topbar"
    "rail main";
  height: 100vh;
}

.app-shell--with-panel {
  grid-template-columns: 232px minmax(0, 1fr) 320px;
  grid-template-areas:
    "rail topbar topbar"
    "rail main   panel";
}

Region rules

  • .app-topbar — 56px tall, white background, hairline bottom border. Holds page title + breadcrumb, search, primary action, avatar.
  • .app-rail — 232px wide on desktop (collapses to 60px under 880px), full-height dark navy. Brand mark top, grouped nav, active state on red, count badges allowed.
  • .app-main — fills remaining space. overflow: auto so only the main scrolls — chrome stays fixed. Top padding 22px, bottom 60px.
  • .app-panel (optional) — 320px right column. White background, scrolls independently. Use for activity logs, detail records, comments.
  • Use --with-panel only when the panel is genuinely useful — never empty.

Responsive behavior

Under 880px

Rail collapses to 60px icon-only. Right panel hides entirely. Main keeps its scroll. App stays usable on a 9" iPad without changing layout DNA.

Under 600px

Rail becomes an off-canvas drawer (v0.2). Topbar drops the search input, keeps the ⌘K icon trigger. Toolbar wraps, action button takes full row.

See it in motion

The dashboard demo composes every shell region: topbar, rail, main with 12-col grid, right activity panel.

Open the dashboard demo ↗