Sheets & overlays

On touch, choices that would be a dropdown on desktop slide up from the bottom as a sheet. One primitive backs the contents menu, the share menu and the language picker.

Anatomy

A panel rounded 20 pixels at the top, capped by a 36-by-4 grabber, over a dimmed backdrop. Rows are 48 pixels tall for a comfortable thumb; the active row carries a faint green tint. It slides in on a spring curve, so it arrives with a little weight.

The sheet's rows and grabber, from the real classes.

On desktop

The same picker is a dropdown on desktop, not a sheet. The choice is the same; only the surface changes to suit a pointer and a bigger screen. Full-screen media zoom is the one overlay that stays the same on every device.

When to use

Do

Reach for a sheet when a touch user picks from a short list.

Don’t

Use a sheet for a single yes/no; that is a dialog.

Do

Keep rows at 48 pixels so a thumb lands cleanly.

Don’t

Shrink the rows below a comfortable touch size.

Do

Render the same choice as a dropdown on desktop.

Don’t

Trap the reader: a tap on the backdrop closes the sheet.

Where it lives

The .post-sheet family in global.css: .post-sheet-panel, .post-sheet-grabber, .post-sheet-head, .post-sheet-list, with .sheet-active on the current row.

Search palette

The blog search is the one overlay that is neither sheet nor dropdown: a centred command palette over a blurred backdrop, opened from the top bar or with Cmd K, fully keyboard-driven. It offers recommendations and series and tag chips before a query, highlights matches as you type, and names its own escape hatch. Between 700 and 1279 pixels the language picker borrows this centred-panel form too, rather than the phone’s bottom sheet.

Consent

The cookie banner is a fixed bar with three equal choices — accept, decline, customise — and the customise route opens a focus-trapped preferences card with one analytics toggle. Declining is as easy as accepting, and the privacy page can reopen the choice at any time.

Spotted something wrong on this page? Email me