Lies drei Artikel in dieser Reihenfolge, dann kannst du losarbeiten: Was ist das te. Design System?, Wie vergebe ich eine CSS-Klasse? und Die 3 goldenen Regeln.
Das Wichtigste in einem Satz
Du stellst keine Schriftgrößen, Farben und Abstände mehr ein — du vergibst Klassen. Eine Klasse ist ein kurzer Name wie t-heading--l, der alle Gestaltungsentscheidungen schon enthält.
Der Gewinn: Deine Seiten sehen automatisch aus wie die übrige Website — auch auf dem Handy, ohne dass du dort etwas nachstellst.
Die drei Artikel für den Anfang
- Was ist das te. Design System? — was der Baukasten ist und welche Klassen-Familien es gibt. Fünf Minuten.
- Wie vergebe ich eine CSS-Klasse? — der eine Handgriff, den du ständig brauchst: Element auswählen, Reiter Stil, Feld Klassen.
- Die 3 goldenen Regeln — die drei Fehler, die am meisten Arbeit machen. Wer sie kennt, braucht den Rest der Hilfe selten.
Dann: einmal selbst bauen
Theorie reicht bis hierhin. Schritt für Schritt: erste Sektion bauen führt dich vom leeren Container bis zur fertigen Sektion mit Überschrift, Text und Button — ohne einen einzigen eigenen Wert.
Danach kennst du den Ablauf und kannst im Alltag gezielt nachschlagen.
Wo du später nachschaust
| Wenn du … | dann … |
|---|---|
| wissen willst, welche Klasse es gibt | Klassen-Übersicht |
| eine Klasse vergibst und nichts passiert | Meine Klasse zeigt keine Wirkung |
| unsicher bist: Global Class oder lokal? | Die Entscheidungshilfe |
| eine ganze Seite neu anlegst | Neue Seite anlegen: die Checkliste |
Zwei Dinge, die du gleich wissen solltest
Eine Klasse pro Element. Nicht c-btn c-btn--primary, sondern nur c-btn--primary. Die kurzen Grundformen gehören nicht in den Editor. Ausnahme sind die Helfer mit u- — die dürfen zusätzlich stehen.
Achte auf pink und grün. Im Feld Klassen steht immer local an erster Stelle. Solange die pink markiert ist, landet jede Einstellung nur an diesem einen Element — und gewinnt dauerhaft gegen jede gemeinsame Klasse. Klick erst die Klasse an (sie wird grün), dann stell ein. Ausführlich: Was ist die lokale Klasse?