Freie Webtools

Dokumentation

Aufbau, Einbindung und Beispiele für das FWT-System. Verständlich erklärt, sichtbar gezeigt und direkt nutzbar.

CSS-System Dokumentation Datenschutzfreundlich

Anpassen / Tokens

Design-Tokens und CSS-Variablen

Design-Tokens sind zentrale Werte für Farben, Abstände, Rundungen, Schatten, Schrift und Layout. Sie sorgen dafür, dass FWT nicht an jeder einzelnen Stelle neu angepasst werden muss.

Statt überall feste Werte wie #0e7490, 1rem oder 12px einzutragen, nutzt FWT zentrale Variablen wie --fwt-color-primary oder --fwt-space-4.

Einfach gesagt: Tokens sind die Stellschrauben im Hintergrund. Klassen sind die einfache Nutzung im HTML.

Grundregel

Klassen oder Variablen?

Für normale Inhalte sind fertige Klassen meist der bessere Weg. Variablen werden genutzt, wenn ein Projekt oder eine eigene Komponente grundsätzlich angepasst werden soll.

Klassen für Nutzer

Schnell, verständlich und direkt im HTML nutzbar.

<div class="fwt-bg-primary fwt-p-4">Inhalt</div>

Variablen für Anpassungen

Sinnvoll für eigene Komponenten, Themes oder Projektanpassungen.

background: var(--fwt-color-primary);

Nicht wild mischen

Wer überall feste Werte einträgt, verliert später die Kontrolle.

padding: var(--fwt-space-4);

Merksatz: Wenn es eine fertige Klasse gibt, nutze die Klasse. Wenn du eine eigene Komponente baust, nutze die Variablen.

Farben

Farb-Tokens

Farb-Tokens geben den Rohfarben eine Bedeutung. Dadurch muss eine Komponente nicht wissen, ob Primary gerade Petrol, Blau oder später eine andere Projektfarbe ist.

Die Rohfarben stehen in 00-settings/colors.css. Die Bedeutungen stehen in 00-settings/variables.css.

`--fwt-color-primary`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-primary);

`--fwt-color-secondary`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-secondary);

`--fwt-color-accent`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-accent);

`--fwt-color-success`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-success);

`--fwt-color-info`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-info);

`--fwt-color-warning`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-warning);

`--fwt-color-danger`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-danger);

`--fwt-color-creative`

Farbwert mit Bedeutung für Komponenten, Utilities oder eigene Bausteine.

color: var(--fwt-color-creative);

Abstände

Abstands-Tokens

FWT nutzt eine gemeinsame Abstandsskala. Dadurch passen Padding, Margin, Layoutabstände und Komponentenabstände besser zusammen.

Die gleichen Werte werden auch für Klassen wie fwt-p-4, fwt-mt-8 oder fwt-padding-left-6 genutzt.

`--fwt-space-0`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-0);

`--fwt-space-1`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-1);

`--fwt-space-2`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-2);

`--fwt-space-3`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-3);

`--fwt-space-4`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-4);

`--fwt-space-5`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-5);

`--fwt-space-6`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-6);

`--fwt-space-8`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-8);

`--fwt-space-10`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-10);

`--fwt-space-12`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-12);

`--fwt-space-16`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-16);

`--fwt-space-20`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-20);

`--fwt-space-24`

Abstandswert für Innen- und Außenabstände.

padding: var(--fwt-space-24);

Rundungen

Radius-Tokens

Rundungen bestimmen, wie weich oder sachlich eine Oberfläche wirkt. Karten, Buttons, Eingaben und Hinweise sollten nicht alle eigene Zufallswerte bekommen.

`--fwt-radius-none`

Beispiel-Rundung

border-radius: var(--fwt-radius-none);

`--fwt-radius-xs`

Beispiel-Rundung

border-radius: var(--fwt-radius-xs);

`--fwt-radius-sm`

Beispiel-Rundung

border-radius: var(--fwt-radius-sm);

`--fwt-radius-md`

Beispiel-Rundung

border-radius: var(--fwt-radius-md);

`--fwt-radius-lg`

Beispiel-Rundung

border-radius: var(--fwt-radius-lg);

`--fwt-radius-xl`

Beispiel-Rundung

border-radius: var(--fwt-radius-xl);

`--fwt-radius-2xl`

Beispiel-Rundung

border-radius: var(--fwt-radius-2xl);

`--fwt-radius-pill`

Beispiel-Rundung

border-radius: var(--fwt-radius-pill);

Schatten

Schatten-Tokens

Schatten helfen, Ebenen zu trennen. Zu viele starke Schatten wirken aber schnell unruhig. Deshalb sollten Schatten zentral und sparsam genutzt werden.

`--fwt-shadow-xs`

Beispiel-Schatten

box-shadow: var(--fwt-shadow-xs);

`--fwt-shadow-sm`

Beispiel-Schatten

box-shadow: var(--fwt-shadow-sm);

`--fwt-shadow-md`

Beispiel-Schatten

box-shadow: var(--fwt-shadow-md);

`--fwt-shadow-lg`

Beispiel-Schatten

box-shadow: var(--fwt-shadow-lg);

`--fwt-shadow-xl`

Beispiel-Schatten

box-shadow: var(--fwt-shadow-xl);

Typografie

Typografie-Tokens

Typografie-Tokens steuern Schriftfamilien, Größen, Zeilenhöhen und Schriftgewichte. Die ausführliche Nutzung wird später unter Inhalt → Typografie gezeigt.

`--fwt-font-sans`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-font-sans);

`--fwt-font-mono`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-font-mono);

`--fwt-font-size-base`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-font-size-base);

`--fwt-font-size-lg`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-font-size-lg);

`--fwt-font-size-xl`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-font-size-xl);

`--fwt-line-height-normal`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-line-height-normal);

`--fwt-font-weight-normal`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-font-weight-normal);

`--fwt-font-weight-bold`

Token für Schrift, Lesbarkeit oder Textgewicht.

font-size: var(--fwt-font-weight-bold);

Nicht jeder Typografie-Token wird mit font-size genutzt. Diese Codebeispiele zeigen nur das Grundprinzip. Die genaue Anwendung kommt später auf der Typografie-Seite.

Layout

Layout-Tokens

Layout-Tokens steuern Containerbreiten, Inhaltsbreiten und spätere Grundwerte für Header, Footer und Layoutbereiche.

`--fwt-container-sm`

Token für Container, Seitenbreite oder Inhaltsbreite.

max-width: var(--fwt-container-sm);

`--fwt-container-md`

Token für Container, Seitenbreite oder Inhaltsbreite.

max-width: var(--fwt-container-md);

`--fwt-container-lg`

Token für Container, Seitenbreite oder Inhaltsbreite.

max-width: var(--fwt-container-lg);

`--fwt-container-xl`

Token für Container, Seitenbreite oder Inhaltsbreite.

max-width: var(--fwt-container-xl);

`--fwt-container-2xl`

Token für Container, Seitenbreite oder Inhaltsbreite.

max-width: var(--fwt-container-2xl);

`--fwt-page-max-width`

Token für Container, Seitenbreite oder Inhaltsbreite.

max-width: var(--fwt-page-max-width);

`--fwt-content-max-width`

Token für Container, Seitenbreite oder Inhaltsbreite.

max-width: var(--fwt-content-max-width);

Nutzung

Tokens sauber nutzen

Tokens sind stark, aber nur dann, wenn sie nicht wild überschrieben werden. Für normale Nutzer sind Klassen meistens besser. Tokens sind die Grundlage für Themes, Komponenten und Projektanpassungen.

Ergebnis

Beispiel-Box mit FWT-Tokens

Diese Box nutzt zentrale Werte für Abstand, Rundung, Fläche, Textfarbe, Rahmen und Schatten.

CSS-Code anzeigen

.meine-box {
    padding: var(--fwt-space-4);
    border: 1px solid var(--fwt-color-border);
    border-radius: var(--fwt-radius-lg);
    background: var(--fwt-color-surface);
    color: var(--fwt-color-text);
    box-shadow: var(--fwt-shadow-sm);
}

Für normale Inhalte: fertige FWT-Klassen verwenden.

Für eigene Komponenten: FWT-Variablen nutzen.

Keine festen Werte quer durch das Projekt verteilen.

Änderungen möglichst zentral in den Token-Dateien oder später im Theme-System machen.