Direkt zum Inhalt springen

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

Sass und Build-System

FWT soll zuerst ohne Sass, ohne Node, ohne Build-Befehl und ohne zusätzliche Werkzeuge funktionieren. Eine CSS-Datei einbinden und loslegen muss möglich bleiben.

Sass oder ein Build-System können später sinnvoll sein, aber sie dürfen keine Einstiegshürde für normale Nutzer werden.

Grundentscheidung: FWT startet mit normalem CSS. Sass ist eine spätere Option, nicht die Voraussetzung.

Warum Sass nicht sofort im Mittelpunkt steht

Viele Nutzer wollen kein Build-System einrichten, nur um Buttons, Farben, Abstände oder einfache Layouts zu verwenden. Genau deshalb soll FWT zuerst direkt verständlich und direkt nutzbar bleiben.

Weniger Einstiegshürde

Wer nur eine Webseite baut, soll nicht erst Node, Sass oder Build-Prozesse verstehen müssen.

Direkt lesbar

Normales CSS ist für viele leichter nachvollziehbar. Die Struktur bleibt sichtbar und verständlich.

Besser prüfbar

Am Anfang ist wichtiger, dass Klassen, Tokens und Komponenten sauber funktionieren.

FWT funktioniert zuerst ohne Build-Schritt

Die zentrale Datei fwt.css lädt die einzelnen CSS-Bereiche. Dadurch bleibt die Struktur übersichtlich, ohne dass ein Build-System nötig ist.

CSS-Struktur anzeigen
@import url("00-settings/colors.css");
@import url("00-settings/variables.css");

@import url("06-utilities/color-utilities.css");
@import url("06-utilities/border-utilities.css");
@import url("06-utilities/spacing-utilities.css");
Die Dateien bleiben getrennt und verständlich.
Änderungen können direkt geprüft werden.
Für einfache Projekte reicht diese Arbeitsweise vollständig aus.

Was später mit Sass oder Build-System möglich wäre

Wenn FWT größer wird, kann ein optionales Build-System sinnvoll werden. Das wäre aber ein zusätzlicher Komfortweg, nicht der einzige Weg.

Minifizierte CSS-Datei

Für öffentliche Downloads könnte später eine kompakte Produktionsdatei erzeugt werden.

Theme-Ausgaben

Unterschiedliche Theme-Dateien könnten aus einer gemeinsamen Grundlage erzeugt werden.

Varianten bündeln

Spätere Editionen könnten gezielt nur benötigte Bausteine enthalten.

Dokumentation erweitern

Ein Build-System könnte später auch Beispielseiten oder Downloadpakete vorbereiten.

Aktuelle Entscheidung für FWT

FWT bleibt zuerst einfach, offen und direkt nutzbar. Sass und Build-Systeme werden später geprüft, wenn der Nutzen größer ist als die zusätzliche Komplexität.

Jetzt: normales CSS, klare Dateien, sichtbare Struktur.
Später: optionales Build-System für Downloads, Themes und Editionen.
Wichtig: Auch mit Build-System muss FWT für normale Nutzer verständlich bleiben.