Public: anyone can read this; the crew can change it.
The page chrome is named in docs/design/areas/chrome.md, and .shell, .topbar, .wordmark, .foot, .skip, .bar and .bare leave §5d #5552
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/5530-the-page-chrome-is-named-in-docs-design → main 4 commits fork 1 thread · 1 unresolved
2 files
changed +8
−10
docs/design/areas/shell.md +8 −1
| @@ -1,8 +1,15 @@ | ||
| 1 | 1 | # Page shell |
| 2 | 2 | |
| 3 | The chrome every page sits in: the sticky top bar, the main column and the footer, drawn by `page()` in `src/web/layout.ts` (the top bar by `topbar()`, its search by `searchBar()`). Rules live in `src/web/style/base.ts`, the search field's in `src/web/style/components.ts`. | |
| 3 | The chrome every page sits in: a skip link, the sticky top bar with the wordmark, the main column and the footer, drawn by `page()` in `src/web/layout.ts` (the top bar by `topbar()`, its search by `searchBar()`, the footer by `footer()`); a page hands over its body and never draws the frame itself. Rules live in `src/web/style/base.ts`, the search field's and the crumbs' narrow-screen rule in `src/web/style/components.ts`. | |
| 4 | 4 | |
| 5 | - `.skip` — the "Skip to content" link, first in the document and hidden above the top until it has keyboard focus. | |
| 6 | - `.topbar` — the `<header role="banner">` across the top of every page: wordmark, crumbs, then the tools. | |
| 7 | - `.wordmark` — the forge's name and mark, linking home (`g h`); the mark turns on hover. Also written by the board's own header in `src/web/pages/board.ts`. | |
| 5 | 8 | - `.topbar-tools` — the top bar's right-hand group (search, Asks, the new and user menus): one row that may shrink but never wraps, its bare `a.small` links 44px tall. |
| 6 | 9 | - `.topbar-search` — the top bar's search form: an icon, a borderless input and its `/` key hint in one bordered pill, the border taking the accent on focus. Shown from 720px; below that the icon button carries search. |
| 7 | 10 | - `.hide-lg` — shown under 720px, hidden from 720px: the narrow-screen stand-in for something `.hide-sm` shows on wide screens (the search icon button beside `.topbar-search`). |
| 11 | - `.shell` — the `<main id="main">` column: the page's width, centred, with its side and bottom padding. | |
| 8 | 12 | - `.shell-wide` — on `<main class="shell">` when a page passes `wide`: from 1200px the column drops its reading width and keeps a 24px gutter, for the one layout that gains from every pixel (a tree beside a file). |
| 13 | - `.bare` — the `<main>` of a page that owns the whole window: no top bar, no footer, no width or padding. Written when the page passes `bare: true` (the board, `src/web/pages/board.ts`). | |
| 14 | - `.foot` — the `<footer>` under every non-bare page: the mark, the links, the reduced-motion note. | |
| 15 | - `.bar` — a wrapping row of controls with an 8px gap, used across pages for a header's actions, a filter bar or a line of meta (for instance `src/web/pages/commits.ts`, `src/web/pages/repo.ts`, the board's header in `src/web/pages/board.ts`). A `.field` directly inside drops its bottom margin and the row aligns to the end, so a labelled input and its button share a baseline. `.search`, `.seg` and `.device-code` inside it are styled in `src/web/style/content.ts`. | |
Correct, and it matches base.ts:171-173. The same sentence is still in DESIGN.md §5d under the |
docs/design/sections/5d-page-local-classes.md −9
| @@ -19,18 +19,9 @@ retire a class, delete its line: two pulls retiring two classes never edit | ||
| 19 | 19 | the same line (#4888). |
| 20 | 20 | |
| 21 | 21 | - **`style/base.ts`** — the page shell (topbar, main, footer) and the layout and text utilities every page leans on: |
| 22 | - `.bar` | |
| 23 | - `.bare` | |
| 24 | - `.foot` | |
| 25 | 22 | - `.hide-sm` |
| 26 | 23 | - `.js-only` |
| 27 | 24 | - `.reduced` |
| 28 | - `.shell` | |
| 29 | - `.skip` | |
| 30 | - `.topbar` | |
| 31 | - `.wordmark` | |
| 32 | ||
| 33 | A `.field` directly inside a `.bar` drops its bottom margin and the bar aligns to the end, so a labelled input and its button share a baseline | |
| 34 | 25 | - **`style/components.ts`** — parts of the §5 components that the table does not spell out — the palette's list, the menu's items, a dialog's head and foot, comments, the theme picker — and a few small helpers beside them: |
| 35 | 26 | - `.cat` |
| 36 | 27 | - `.error-note` |
new above
offline
This sentence repeats the paragraph that stays in DESIGN.md §5d under the style/base.ts list. Not blocking, but the §5d copy should go in a later pull so the rule has one home.