Styling components
13 steps in 5 sets of CSS.
Styling the things that resist styling. Form controls, surfaces like cards and dialogs, text truncation and scroll containers, and other media.
Thirteen steps. Native controls have become far more styleable than their reputation suggests, and reaching for a custom select is now usually the wrong call.
Controls
- Every state a button hasHover is the easy one. The other five are what makes it feel finished.
- Styling the controls the browser drawsSome parts of a form control are yours to style and some belong to the browser.
Surfaces
- A cardA card is a box with a shadow until you decide how it behaves when it is tall.
- Badges and status pillsSmall labels that have to stay legible at every size and in both themes.
- Styling a dialog and its backdropThe backdrop is a pseudo-element, and the dialog is in the top layer above everything.
- A tooltip from an attributeThe label lives in the markup, and the pseudo-element renders it.
Text & scrollers
- Cutting text offOne line is a different technique from three lines, and both need a width to work against.
- ScrollbarsThere is a standard way now, and the old vendor pseudo-elements still do more.
- A loading placeholderA gray block that shimmers, sized like the thing that has not arrived yet.
Other media
- Styling for paperA print stylesheet is mostly deletion, plus the URLs that a link loses on paper.
- Dark modeHonouring the reader's system theme, with a manual override on top.
- Light and dark without duplicationDeclare the schemes you support and let one set of variables switch.
Encore
- app_shell.cssThe whole page frame: a sticky header, a sidebar that folds away, and a content column that behaves.