6.1.1

Front-end design alphabet

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. Updated fortnightly through 2023.

Establish base unit and tint variables to control UI

Whether through CSS Custom Properties or a pre-processor like Less or Sass, establishing base variables at the top of your document and referencing them whenever colour or layout values are defined influences aesthetic harmony. Great numbers to select from are 12 or 16 due to their ability to be cleanly divided into halves or quarters.

It is possible to do the same with colour. Defining the RGB values in a Custom Property allows you to later drop those into the rgba() functional notation and set the alpha channel in context.

You can feasibly control an entire layout and colour system in this way; completely avoiding absolute values within components. The values may never change, but the method forces consistency and the option to re-tint or scale UI improves the robustness of the design.

:root {
  --unit: 12px;
  --tint: 255, 79, 0;
}
button {
  background: rgba(var(--tint), 0.25);
  border-radius: calc(var(--unit) / 4);
  line-height: calc(var(--unit) * 2);
  color: rgba(var(--tint));
  padding: calc(var(--unit) / 2) var(--unit);
}

Control state semantically with ARIA attributes

Designers will often assign visual state changes to UI components via classes such as .loading, .current, .open, or .hidden. Classes, however, are simply arbitrary strings which have no explicit meaning to a computer, add bloat to code, and require documentation. These same classes could be substituted for aria-busy, aria-current, aria-expanded, and aria-hidden, respectively, in most circumstances.

ARIA attributes and properties can be interpreted by screen readers and carry implied semantics while providing clean CSS selectors and JavaScript hooks. It is worth familiarising one's self with each and using them wherever possible.

/* e.g. highlight current navigation item */
nav a {
  color: var(--tint);
}
nav a[aria-current="true"] {
  color: var(--foreground);
}

/* e.g. indicate activity while a button performs a task */
button {
  cursor: pointer;
}
button[aria-busy="true"] {
  cursor: busy;
}