Public: anyone can read this; the crew can change it.
Visibility utilities are named in docs/design/areas/visibility.md, and .hide-sm, .js-only and .reduced leave §5d #5553
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/5531-visibility-utilities-are-named-in-docs-d → main 5 commits fork
2 files
changed +16
−4
docs/design/areas/visibility.md added +15
| @@ -0,0 +1,15 @@ | ||
| 1 | # Visibility | |
| 2 | ||
| 3 | What shows only on a wide screen, only when script runs, or only to an admin when the forge runs with reduced protection. Each rule | |
| 4 | lives in `src/web/style/base.ts`. | |
| 5 | ||
| 6 | - `.hide-sm` — hidden under the small breakpoint, shown (`inline-flex`) from it up; for labels and controls a narrow | |
| 7 | topbar or row has no room for. Written by `userMenu()`, `searchBar()` and `helpItem` in | |
| 8 | `src/web/layout.ts`, `fileHeader()` in `src/web/diff-view.ts` and `boardPage()` in `src/web/pages/board.ts`. | |
| 9 | - `.js-only` — hidden until the shell script sets `:root.js`, then `inline-flex`; carried by every control that only | |
| 10 | works with a script, so a page without one never shows a dead button. Written by `helpItem` and `footer()` in | |
| 11 | `src/web/layout.ts`, `systemPage()` in `src/web/pages/system.ts`, `copyBtn()` in `src/web/pages/origins.ts`, | |
| 12 | `finderButton()` in `src/web/pages/explorer.ts` and `drawMap()` in `src/web/pages/map.ts`. | |
| 13 | - `.reduced` — the footer's reduced-protection notice (`#reduced-protection`), shown only to an admin, from `protectionNotice()`, | |
| 14 | and muted by `.foot .reduced`. Written by `footer()` in `src/web/layout.ts`. It is not about | |
| 15 | `prefers-reduced-motion`. |
docs/design/sections/5d-page-local-classes.md +1 −4
| @@ -18,10 +18,7 @@ gone, so this list only shrinks. Each class sits on its own line, so to | ||
| 18 | 18 | retire a class, delete its line: two pulls retiring two classes never edit |
| 19 | 19 | the same line (#4888). |
| 20 | 20 | |
| 21 | - **`style/base.ts`** — the page shell (topbar, main, footer) and the layout and text utilities every page leans on: | |
| 22 | - `.hide-sm` | |
| 23 | - `.js-only` | |
| 24 | - `.reduced` | |
| 21 | - **`style/base.ts`** — the page shell (topbar, main, footer) and the layout and text utilities every page leans on (all of them now named in docs/design/areas/shell.md and visibility.md). | |
| 25 | 22 | - **`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: |
| 26 | 23 | - `.error-note` |
| 27 | 24 | - `.menu-item` |
new above
offline