CSS components templates

10 templates

Small interface pieces that get reached for constantly and reimplemented badly. Several of these use HTML elements that already do the job, which is almost always better than rebuilding it in JavaScript.

Several of these already exist in HTML

The accordion is <details> and <summary>. The modal is <dialog>. The toggle switch is a checkbox. In each case the browser already handles the hard part, and reaching for a library means reimplementing it — usually less well.

dialog.showModal() gives you a focus trap, the rest of the page marked inert, Escape to close, and a top-layer stacking context that sits above everything regardless of z-index. That last one is the bug that makes hand-rolled modals appear behind a sticky header.

<details name="faq"> makes a group of disclosures exclusive — opening one closes the others — with no JavaScript at all. And a visually hidden checkbox behind a switch means Tab reaches it, Space toggles it, and it submits with the form, none of which has to be built.

The details that separate these from the usual versions

• :focus-visible, not :focus. A focus ring after a mouse click is what makes designers remove focus rings entirely, which breaks keyboard navigation. :focus-visible shows it only when it helps, and the argument goes away.
• Custom properties for variants. The base class defines two or three variables and each variant redefines them. A new variant is one line, not a copy of the whole rule.
• Never colour alone. Every badge has a word in it, every alert has an icon and a heading, every status has text. Roughly one man in twelve cannot reliably tell your green from your amber.
• Reduced motion is handled. Anything that animates is switched off under prefers-reduced-motion — but the component stays visible, because removing the indicator entirely is not the accessible version.

Other categories