Front-end code bits

A collection of simple tips, directives, and opinions on front-end design best practice; primarily highlighting old-school vanilla code features that modern designers may have overlooked.

• Expanded hit areas

  Use pseudo-elements to expand hit areas on user interface controls.

• Dark Mode

  Implement Dark Mode with Custom Properties and the prefers-color-scheme Media Feature.

• Tinted controls

  Filter colour all the way down with currentColor, the original CSS variable.

• Master layout units

  Establish base unit and tint variables to influence harmony in layout and colour.

• Semantic state

  Control and style state semantically with ARIA attributes.