shell layout
Shell layout is the shared CSS recipe layer for recurring page frames across blog, docs, work, and FS. Each variant exposes scoped variables for max width, inline gutter, gap, and sidebar or rail sizing while still falling back to the legacy root shell tokens. Centered shells stay width-only, while sidebar shells now include the shared mobile single-column collapse at 768px. Outer chrome, app branding, topbars, and drawer state remain app-owned, and the optional rail slot is still a structural hook unless an app defines a third column locally.
| field | value |
|---|---|
| group | global |
| import | @arieare/ds/shell-layout.css |
| source | packages/ds/src/components/ui/shell-layout.css packages/ds/src/tokens.css |
.aa-shell--centered-narrow
Tight centered frame for editorial and reading-heavy pages, with a local width and inline override applied here.
Blog index and article shells use this recipe, with per-instance max-width and gutter overrides when needed.
.aa-shell--centered-wide
Roomier centered frame for broader single-column pages, also configurable at the shell instance level.
Use this when the page wants a larger canvas without adding a sidebar, then tune width and outer gutters per page.
.aa-shell--sidebar
Shared two-column desktop frame for sidebar-driven apps, with optional shell max-width, gap, and sidebar width overrides.
.aa-shell--sidebar-wide
Shared sidebar frame with configurable outer gutters, gap, sidebar width, and optional rail width.
component tokens
| token | source | description |
|---|---|---|
--shell-centered-narrow-max-width / --shell-centered-narrow-inline | @arieare/ds/shell-layout.css | Scoped overrides for the narrow centered shell width and inline gutter. |
--shell-centered-wide-max-width / --shell-centered-wide-inline | @arieare/ds/shell-layout.css | Scoped overrides for the wide centered shell width and inline gutter. |
--shell-sidebar-max-width / --shell-sidebar-inline / --shell-sidebar-gap / --shell-sidebar-sidebar-w | @arieare/ds/shell-layout.css | Scoped overrides for the compact sidebar shell frame width, gutters, region gap, and sidebar column. |
--shell-sidebar-wide-max-width / --shell-sidebar-wide-inline / --shell-sidebar-wide-gap / --shell-sidebar-wide-sidebar-w / --shell-sidebar-wide-rail-w | @arieare/ds/shell-layout.css | Scoped overrides for the wide sidebar shell, including the optional right-rail width. |
--aa-shell-max-width / --aa-shell-inline / --aa-shell-gap / --aa-shell-sidebar-w / --aa-shell-rail-w | @arieare/ds/shell-layout.css | Resolved per-shell aliases used inside a shell instance and by app-level extensions. |
--shell-max-narrow / --shell-max-wide / --shell-inline / --shell-gap / --shell-rail-w / --sidebar-w | @arieare/ds/tokens.css | Legacy root defaults preserved for backward compatibility and used as fallbacks by the scoped shell variables. |
props
| prop | type | default | description |
|---|---|---|---|
.aa-shell | CSS class | — | Base shell marker. Pair it with one variant class and slot classes on child regions. |
.aa-shell--centered-narrow | CSS class | — | Centers content on the narrow editorial width used by blog reading surfaces. |
.aa-shell--centered-wide | CSS class | — | Centers content on the wider shared width used by broader single-column pages. |
.aa-shell--sidebar | CSS class | — | Creates the shared sidebar frame: fixed sidebar width plus flexible content column on desktop, collapsing to one column below 768px. |
.aa-shell--sidebar-wide | CSS class | — | Uses the shared sidebar frame with outer gutters and shell gap for roomier app shells, with the same single-column collapse below 768px. |
.aa-shell__sidebar | CSS class | — | Sidebar slot hook for the shared DS sidebar or an app-owned left rail. |
.aa-shell__content | CSS class | — | Main content slot hook with the min-width reset needed for flexible inner layouts. |
.aa-shell__rail | CSS class | — | Optional right-rail slot hook. Shared CSS does not size or place a third column on its own. |