Diese Vorlage ist zum Ändern gebaut. Fast alles, was man ändern will, ist eine Variable: ein
benannter Wert wie --tpl-space-md: 1rem, den QuartzControl unter Stile → Variablen anzeigt und
den man dort überschreibt, getrennt für hell und dunkel. Kein Code, keine Datei. Erst wenn nicht
der Wert, sondern die Form anders werden soll, braucht es ein Stylesheet — und auch dafür gibt
es einen Weg, der die Vorlage selbst nicht anfasst.
Was will ich ändern?
| Ich will … | Dann |
|---|---|
| … eine Farbe ändern — den Akzent, den Grund, die Callouts | 6.2 – Farben und Kontrast |
| … eine andere Schrift | 6.3 – Schriften |
| … mehr oder weniger Abstand, größere Ecken, andere Textgrößen | 6.4 – Variablen |
| … den Text breiter, die Seitenleisten schmaler, andere Umbruchbreiten | 6.5 – Seitenraster |
| … wissen, was die Vorlage für Tastatur, Screenreader und Druck tut | 6.6 – Barrierefreiheit |
| … eine zweite Sprache, oder nur eine | 6.7 – Zwei Sprachen |
| … die Vorlage in ein anderes Projekt bringen oder weitergeben | 6.8 – Das Vorlagenpaket |
| … eine Komponente anders geformt, nicht nur anders gefärbt | 6.1 – Etwas ändern, Weg 2 und 3 |
Die Seiten
- 6.1 – Etwas ändern — die drei Ebenen, von der billigsten zur teuersten, und wo eine eigene Regel hingehört, damit sie gewinnt.
- 6.2 – Farben und Kontrast — die neun Farbrollen, zwei davon verkehrt herum benannt, und die 93 gemessenen Paare.
- 6.3 – Schriften — drei Familien, selbst gehostet, und warum ihre
@font-face-Regeln ersetzt werden. - 6.4 – Variablen — die 50 Werte, aus denen die Gestaltung besteht, und was doch als Zahl in einer Datei steht.
- 6.5 – Seitenraster — vier Frames, zwölf Spalten, drei Breiten.
- 6.6 – Barrierefreiheit — Kontrast, Tastatur, Zielgrößen, Systemeinstellungen, Druck.
- 6.7 – Zwei Sprachen — wie dieselbe Website in zwei Sprachen entsteht und wo das aufhört.
- 6.8 – Das Vorlagenpaket — die Bausteine, was mitreist und was nicht.
Zwei Dinge vorher
Änderungen an der Vorlage selbst — Weg 2 in 6.1 — kann der nächste Import eines Vorlagenpakets überschreiben. Und in
custom.scssschreibt QuartzControl drei Blöcke bei jedem Speichern neu; was man dort von Hand einträgt, ist beim nächsten Klick weg. Beides steht ausführlich in 6.1.