Reset

What ASW's reset layer does, where it came from, and what it deliberately leaves alone.

ASW’s reset is in src/layers/00-reset.css, ported from Pico CSS v2.1.1 (MIT). It’s an opinionated normalize, not a zero-baseline reset — it corrects browser inconsistencies without stripping all defaults.

What it does

Box-sizing

Every element uses border-box. Padding and border are included in the declared width.

*, *::before, *::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

background-repeat: no-repeat prevents accidental tiling on elements that receive a background image.

Document baseline

:where(:root) {
  -webkit-tap-highlight-color: transparent;  /* remove tap flash on mobile */
  text-size-adjust: 100%;                    /* prevent font inflation on mobile */
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;                 /* wrap long URLs / tokens */
  tab-size: 4;
}

Font size

html { font-size: 100%; }

Root font size is 100% of the browser default (typically 16px). Responsive scaling is applied in 01-tokens.css via clamp(). Setting 100% here respects user accessibility preferences — users who set a larger browser font get a proportionally larger site.

Body

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
  font-family: var(--font-ui);
  background-color: var(--surface);
  color: var(--text);
}

All visual values come from ASW tokens. Font and colour are set once here and inherited everywhere.

Main

main { display: block; }

Fixes a legacy IE bug where <main> wasn’t treated as a block element. Still included for completeness.

Nested lists

:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; }

Removes the double margin that browsers add to nested lists.

What it leaves alone

The reset deliberately does not:

Pseudo-elements

::before, ::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

Pseudo-elements inherit text decoration and vertical alignment from their parent. This prevents ::before/::after content from appearing unexpectedly underlined in links.

Customising the reset

The reset layer uses low-specificity :where() selectors where possible. Override anything with a standard selector — no !important needed.

/* Override: use rem-based font scaling instead of responsive clamp */
html { font-size: 1rem; }

/* Override: add body padding for a specific layout */
body { padding-inline: var(--space-4); }