Application
This page exercises the components — the Win32 chrome in components/,
composed rather than catalogued. The sibling text shows the profile dressing a document; this one
shows it dressing an application, which is the case it was built for.
Switch era in the header and the whole thing changes design language without a single class moving. That is the point of the exercise: nothing below names a colour, a gradient or a bevel.
A player window
Title bar, menu bar, toolbar, tab strip, list view, transport and status bar. Six components and one block, stacked in the order Windows stacked them.
| Title | Artist | Album | Length |
|---|---|---|---|
| Windowlicker | Aphex Twin | Windowlicker | 6:07 |
| Teardrop | Massive Attack | Mezzanine | 5:29 |
| An Ending (Ascent) | Brian Eno | Apollo | 4:22 |
| Everything In Its Right Place | Radiohead | Kid A | 4:11 |
The list view is a component and the tag is not. A <table> on this site keeps
its readable default; the control is opted into with .c-listview, because a column
header you press and a nineteen-pixel row are a control, not tabular data.
A dialog
The same block with its other two parts: a body and a footer. Buttons here are bare
<button> elements, so they arrive already dressed by
blocks/controls.css and keep the 75px minimum that the toolbar strips off.
Choose how the library handles files it finds on removable drives.
Inactive, and a trough
A window that does not have focus dims its title bar and changes nothing else, which is why
--inactive is a modifier rather than a second component. The scroller inside it is a
real one: under Classic its trough is a dithered checkerboard, because
--surface-well-block holds a fill rather than a colour and a checkerboard is a legal
answer to it.
Windows 95 filled a scrollbar track with a fifty percent checkerboard of white and face grey, one device pixel per square.
It was a way to get a colour the sixteen-colour palette did not contain, and it outlived the constraint by a decade.
Scroll this box under each era to see the trough change material rather than shade.