Skip to content
design

UI composition

Three full screens, the helm, a phone and the nav station, built only from the kit's components and instruments.

On this page
Depth14 mSOG6.4 knTrue wind19 knBarometer1009 hPa
The smallest composition the screens repeat: a reading with its trust, the last minutes of it under it, and the pills a phone shows in the same place. Each part is a kit component; only the box around them is layout.

The site runs from simple to complex: foundations, the maritime rules, the components and the instruments, and here the screens they make up. Each screen on these pages is a full view of the app, live on a simulated feed, and every part a mariner sees in it is a kit component (@bosunkit/components/*) or a kit instrument (@bosunkit/instruments). What the screens add is layout: the boxes, grids and container queries that place the parts. Where a screen needs something the kit does not have, the page lists it under Kit gaps and the screen composes the nearest parts; nothing here is a copy of a component restyled for the page.

01Only kit partsEvery reading, alert, control and dial on a screen is imported from a public kit path. A wrapper may place parts; it never draws one.
02The rules travel with the partsAn alert zone, a reading or an alert card brings its bridge rules with it, so a composed screen keeps priority marks, integrity and acknowledgement without restating them.
03Gaps are listed, not builtWhen a screen needs a part the kit lacks, such as a passage ribbon or a console grid, the page names it as a kit gap and composes the nearest parts.

The screens

  • Conning: the helm screen at helm size, with the dials, the chart and the alert list, and a switch to the night palette.
  • Mobile: a phone in the cabin at anchor, about 390 px wide, with the most urgent alert on top and tabs for the situation, the anchor and the crew.
  • Desktop: the nav station, with the app shell, the AIS target table, the weather, the barometer and the watch settings.

How to read the pages

Each page has the same parts, in this order:

PartWhat it shows
HeroThe whole screen, live. Values follow timers that stop when the page closes; an alert arrives, is acknowledged and clears; no overlay opens on its own. "Code" under the hero shows the source as written.
Built fromEvery kit component and instrument the screen uses, linked to its page, and the job it does on the screen.
LayoutThe grid, the density, and what collapses at which container width. The screens respond to the width of their frame through container queries, so a narrow browser window shows the narrow layout.
What the crew sees firstThe order of attention on the screen and the bridge alert rules that set it.
Theme and sizeHow the screen behaves in Night, Dusk, Day and Bright, and at the helm size class.
Kit gapsWhat the screen needed that the kit does not provide, and how the screen composes around it.

The site's theme switch restyles each screen, as it restyles the rest of the site. The conning screen also carries its own night switch, which sets the night palette on that screen alone.

Do
Compose a reading and its trend from the kit's Reading and Sparkline. The reading keeps its integrity marks and units.
Don't
SOG 6.4
Don't draw a value in a styled box of the screen's own. It has no source, no age and no invalid state, and it drifts from the kit.
  • Components: every kit component the screens are built from, with its examples and props.
  • Instruments: the dials and gauges on the conning screen.
  • Alarms and severity: the priorities, marks and acknowledgement each screen keeps.
  • Grid: the spacing scale the screens' layouts use.