This template is built to be changed. Almost everything you might want to change is a
variable: a named value such as --tpl-space-md: 1rem, which QuartzControl shows under
Styles → Variables and which you override there, separately for light and dark. No code, no
file. Only when not the value but the shape is to change does it take a stylesheet — and even
for that there is a way that leaves the template itself untouched.
What do I want to change?
| I want to … | Then |
|---|---|
| … change a colour — the accent, the ground, the callouts | 6.2 – Colours and contrast |
| … use a different typeface | 6.3 – Typefaces |
| … have more or less spacing, larger corners, other text sizes | 6.4 – Variables |
| … make the text wider, the sidebars narrower, break at other widths | 6.5 – Page grids |
| … know what the template does for keyboard, screen reader and print | 6.6 – Accessibility |
| … have a second language, or only one | 6.7 – Two languages |
| … bring the template into another project or pass it on | 6.8 – The template package |
| … have a component shaped differently, not just coloured differently | 6.1 – Changing something, ways 2 and 3 |
The pages
- 6.1 – Changing something — the three levels, cheapest first, and where your own rule belongs so that it wins.
- 6.2 – Colours and contrast — the nine colour roles, two of them named the wrong way round, and the 93 measured pairs.
- 6.3 – Typefaces — three families, self-hosted, and why their
@font-facerules are replaced. - 6.4 – Variables — the 50 values the design is made of, and what does stand as a number in a file after all.
- 6.5 – Page grids — four frames, twelve columns, three widths.
- 6.6 – Accessibility — contrast, keyboard, target sizes, system settings, print.
- 6.7 – Two languages — how the same site comes about in two languages and where that stops.
- 6.8 – The template package — the parts, what travels and what does not.
Two things first
Changes to the template itself — way 2 in 6.1 — can be overwritten by the next import of a template package. And in
custom.scssQuartzControl rewrites three blocks on every save; what you enter there by hand is gone with the next click. Both stand in full in 6.1.