WO-4185 · Truck TR-077
Overdue
Application shell
Usage
The shell is the frame every signed-in Fleetline screen sits in. It only places components; it adds no colors, borders or type of its own.
- Sidebar — dispatch and workshop areas with a second level of navigation (work order queues, inspections, parts). Desktop dispatchers.
- Top-nav only — areas without sub-sections (Reports, a mechanic's job list). Main is capped at the extra-large container so lines stay readable on wide monitors.
- Mobile — tablets in portrait and phones in the yard. The top nav collapses behind Menu; the side nav is not shown, so every side-nav destination must also be reachable from the area's landing page.
- Prefer document scroll. Only the top nav is sticky; the side nav and main scroll with the page, which keeps browser zoom and find-in-page working.
- One
<main id="main">per document, and the skip link is the first focusable element. The demos below use<div class="app-shell__main">because this docs page already has its own<main>.
Anatomy
- Skip link —
a.skip-link[href="#main"], first in the body - Header —
header.top-nav.top-nav--sticky.app-shell__header(banner landmark) - Side navigation —
nav.side-nav.app-shell__navwith its ownaria-label(sidebar variant, ≥ 64rem) - Main —
main#main.app-shell__main[tabindex=-1]: page header, then content - Aside (optional) —
aside.app-shell__asidefor related, non-essential content - Footer (optional) —
footer.app-shell__footer: version, status link
Examples
Each composition renders in a fixed-height frame that scrolls like a browser window. The shell reacts to its own width (container query), so the frames show the real breakpoints.
Application shell
variant:sidebar — dispatch dashboard
Dispatch board
North Yard depot · Wednesday 8 October
- Vehicles on road
- 94of 128
Up 6 vs yesterday
- Overdue services
- 7
Up 2 since Monday
Oldest: Truck TR-077, 9 days
- Open work orders
- 23
Same as last week
Today's work orders
| Work order | Vehicle | Mechanic | Status | Due |
|---|---|---|---|---|
| WO-4185 | Truck TR-077Volvo FH, 312,940 km | Idris Okafor | Overdue | |
| WO-4182 | Van KX-219Ford Transit, 84,212 km | Marta Quintero | In progress | |
| WO-4191 | Van KX-224Mercedes Sprinter, 51,006 km | Lena Brandt | Waiting for parts | |
| WO-4193 | Pickup PU-012Toyota Hilux, 140,377 km | Marta Quintero | Done |
Desktop: header + side nav + main. Narrow the window below 64rem and the side nav steps aside for the top-nav Menu.
variant:top-nav-only — mechanic's job list with aside
My jobs today
Lena Brandt · Bay 3 · 4 jobs, about 6.5 hours
| Job | Vehicle | Status | Labour (h) |
|---|---|---|---|
| Brake pads, front axle | Van KX-224 | Waiting for parts | 1.25 |
| 60,000 km service | Van KX-231 | Not started | 3.0 |
| Tachograph check | Truck TR-081 | Not started | 0.75 |
No side nav: the main column is capped at the extra-large container; the aside sits beside main from 64rem and drops below it on narrower screens.
variant:mobile — 24rem frame
Dispatch board
North Yard · 8 October
- Vehicles on road
- 94of 128
- Overdue services
- 7
Up 2 since Monday
WO-4182 · Van KX-219
In progress
Below 48rem the top nav folds links and search behind Menu; the side nav is hidden and work orders render as cards instead of a wide table.
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<div class="app-shell">
<header class="top-nav top-nav--sticky app-shell__header">…</header>
<div class="app-shell__body">
<nav class="side-nav app-shell__nav" aria-label="Dispatch">…</nav>
<main class="app-shell__main" id="main" tabindex="-1">
<header class="page-header">…<h1 class="page-header__title">Dispatch board</h1>…</header>
…
</main>
<aside class="app-shell__aside" aria-label="Parts arriving today">…</aside> <!-- optional -->
</div>
<footer class="app-shell__footer">…</footer>
</div>
</body>
<!-- Top-nav only: add .app-shell--top-nav-only and leave out the side nav. -->API
| Hook | Values | Purpose |
|---|---|---|
.app-shell | block | Grid rows header / body / footer; size container for the breakpoints |
.app-shell__body | part | Columns nav / main / aside (aside column appears when an .app-shell__aside child exists) |
.app-shell__header | __nav | __main | __aside | __footer | parts | Grid placement only, added next to the component class |
.app-shell--top-nav-only | modifier | No side nav; main capped at --size-container-xl |
--app-shell-min-block-size | custom property | Minimum height (default 100dvh) |
| 64rem / 40rem | container breakpoints | Side nav hides below lg; tighter gutters below sm |
Do and don't
html { scroll-padding-top } set to its height.Accessibility
| Element | Landmark | Notes |
|---|---|---|
a.skip-link | — | First tab stop; moves focus to #main (which has tabindex="-1") |
header.top-nav | banner | Only when it is a direct child of body (not inside main) |
nav.top-nav__nav, nav.side-nav | navigation | Each with a distinct aria-label ("Main", "Dispatch") |
main#main | main | Exactly one per document; holds the page's h1 |
aside | complementary | Name it with aria-labelledby |
footer | contentinfo | Only when a direct child of body |
Source order equals visual and tab order in every variant (no order or reversed grid areas). The sticky top nav needs scroll-padding-top so focused elements are never hidden under it (WCAG 2.4.11). At 320px wide and 400% zoom the shell is a single column with no horizontal scroll.
Tokens
| Custom property | Purpose |
|---|---|
--space-4, --space-6, --space-8, --space-10 | Main gutters and gap between page sections |
--size-container-xl | Max width of main in the top-nav-only variant |
--breakpoint-lg, --breakpoint-sm | Copied as literal 64rem / 40rem in the container queries |