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.