Foundations
Layout and responsive behavior
Public reading pages, discovery surfaces and the editor workspace share roles but use different compositions.
On this page
Layout families
| Family | Composition | Phone behavior |
|---|---|---|
| Publication shell | Masthead, section navigation, reading content, newsletter and footer. | Navigation and stories adapt to the narrow viewport. |
| Archive/search | Heading, filters or query, linked results, pagination or local reveal. | Media and copy reflow without duplicating result actions. |
| Article | Headline, editorial metadata, hero image, body and reading utilities. | Preserve readable measure and intrinsic image proportions. |
| Admin | Persistent desktop sidebar, page header, panels or rows, save affordances. | Sidebar becomes a drawer; controls and row information stack. |
| Place detail | Scrim, image/context, facts, grouped attributes and actions. | Scrollable native detail surface rather than a compressed desktop map. |
Composition checks
- Use the public SiteShell on publication routes and admin shell on editorial routes.
- Check sticky save controls against both desktop sidebar offset and phone viewport.
- Opening a dialog should not displace its trigger or detach a menu from the triggering control.
- At 390 CSS pixels, avoid body-level horizontal scrolling; intentional table/toolbar overflow needs a usable region.
Source references
| File | Responsibility |
|---|---|
| components/site-shell.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/admin/admin-shell-navigation.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/admin/sticky-save-bar.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/map-detail-modal.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1