Optionen · FWT Dokumentation

Anpassen / Optionen

Optionen in FWT

FWT soll anpassbar sein, ohne dass Nutzer das komplette System zerlegen müssen. Farben, Abstände, Rundungen, Schatten und spätere Komponentenwerte sollen zentral gesteuert werden können.

Die wichtigste Regel lautet: Erst vorhandene Klassen nutzen. Nur wenn ein Projekt grundsätzlich anders aussehen soll, werden Variablen oder spätere Theme-Dateien angepasst.

FWT soll nicht dazu verleiten, überall eigene Einzelwerte einzubauen. Sonst verliert das System genau den Vorteil, den es bringen soll.

Anpassbare Bereiche

Was kann angepasst werden?

FWT ist so aufgebaut, dass wichtige Gestaltungseigenschaften zentral vorbereitet sind. Dadurch können Projekte unterschiedlich aussehen, ohne dass jede Komponente einzeln umgeschrieben werden muss.

Farben

Primary, Secondary, Statusfarben, Flächenfarben und Rainbow werden zentral gesteuert.

--fwt-color-primary

Abstände

Padding, Margin und spätere Layoutabstände nutzen dieselbe Skala.

--fwt-space-4

Rundungen

Buttons, Karten, Eingaben und Boxen sollen nicht alle eigene Zufallsrundungen bekommen.

--fwt-radius-lg

Schatten

Schatten sollen Ebenen zeigen, aber nicht übertrieben wirken.

--fwt-shadow-sm

Typografie

Schriftgrößen, Zeilenhöhen und Schriftgewichte werden über zentrale Werte vorbereitet.

--fwt-font-size-base

Layout

Containerbreiten, Inhaltsbreiten und spätere Layoutmuster sollen zentral steuerbar bleiben.

--fwt-container-xl

Für Nutzer

Erst Klassen nutzen

Für normale Inhalte sind fertige Klassen der beste Weg. Sie sind einfacher, schneller und sicherer als eigene CSS-Regeln.

Live-Beispiel

Hinweis mit Rahmen, Innenabstand und sauberer FWT-Struktur.

HTML-Code anzeigen

<div class="fwt-frame fwt-border-warning fwt-p-4">
    Hinweis mit Rahmen, Innenabstand und sauberer FWT-Struktur.
</div>

Klassen sind ideal für normale Seiteninhalte.

Klassen sind leichter zu kopieren und zu verstehen.

Klassen verhindern, dass überall unterschiedliche Einzelwerte entstehen.

Für Anpassungen

Variablen gezielt überschreiben

Wenn ein Projekt grundsätzlich andere Farben, Abstände oder Rundungen braucht, werden nicht alle Komponenten einzeln geändert. Stattdessen werden zentrale Variablen überschrieben.

Das sollte später bevorzugt in einer eigenen Projekt- oder Theme-Datei passieren, nicht direkt in den FWT-Kerndateien.

CSS-Code anzeigen

:root {
    --fwt-color-primary: #0e7490;
    --fwt-radius-lg: 1rem;
    --fwt-card-shadow: var(--fwt-shadow-sm);
}

Wichtig: Kerndateien möglichst stabil lassen. Projektanpassungen gehören später in eine eigene Theme- oder Custom-Datei.

Stabilität

Was sollte man nicht direkt ändern?

FWT soll wachsen können. Wenn Nutzer direkt in den Kern-Dateien alles verändern, werden Updates später schwierig.

Keine wilden Einzelwerte

Nicht überall eigene Farben, Abstände oder Schatten eintragen.

padding: 17px;

Kerndateien nicht unnötig ändern

Änderungen an FWT-Dateien können spätere Updates erschweren.

public/assets/css/00-settings/variables.css

Keine Bedeutung nur über Farbe

Warnungen, Fehler oder Erfolg brauchen immer auch verständlichen Text.

<p class="fwt-text-danger">Diese Eingabe ist fehlerhaft.</p>

Hart gesagt: Wer FWT überall mit Einzelwerten überschreibt, baut am Ende wieder sein eigenes Chaos. Genau das soll FWT vermeiden.

Ausblick

Spätere Optionen und Theme-System

Die aktuelle Version arbeitet zuerst mit CSS-Dateien, Variablen und Klassen. Später kann daraus ein saubereres Theme-System entstehen.

Geplant: eigene Theme-Dateien für Projektfarben und Kundenanpassungen.

Geplant: Sass oder Build-System als spätere Erweiterung, nicht als Einstiegshürde.

Geplant: Optionen für Komponenten, zum Beispiel kompakte oder großzügige Varianten.

Geplant: klar dokumentierte Update-Regeln, damit Anpassungen nicht verloren gehen.