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

FWT herunterladen

FWT kann direkt online eingebunden oder als Paket heruntergeladen werden. Für echte Projekte ist der Download die bessere Variante, weil die Dateien dann im eigenen Projekt liegen und nicht von einer externen Einbindung abhängig sind.

Der aktuelle Download enthält das FWT-Grundsystem mit CSS- und JavaScript-Dateien. Damit können erste Seiten, Dokumentationen, Layouts und einfache Bausteine aufgebaut werden.

Hinweis: Version 0.1.0 ist eine frühe Core-Version. Sie ist nutzbar, aber noch nicht als endgültige stabile 1.0-Version zu verstehen.

FWT Core 0.1.0

Das aktuelle Paket ist als Grundlage gedacht. Es enthält die zentralen Dateien, die für den Einstieg mit FWT benötigt werden.

Version

FWT Core 0.1.0
Frühe Core-Version für erste Tests, interne Projekte und vorbereitende Webseiten.

Download-Datei

fwt-core-v0.1.0.zip
Das Paket liegt im öffentlichen Downloadbereich von FWT.

Empfohlene Nutzung

Für Tests, Demos, Dokumentationen und erste eigene Seiten. Für Kundenprojekte sollte die Version bewusst geprüft werden.

Download:
https://freiewebtools.de/fwt/downloads/fwt-core-v0.1.0.zip

Was im Download enthalten ist

Das Core-Paket enthält die grundlegenden FWT-Dateien. Es ist bewusst schlank gehalten und soll eine saubere Basis liefern.

CSS-System

Die zentrale fwt.css und die modularen CSS-Dateien für Farben, Layout, Typografie, Komponenten und Hilfsklassen.

JavaScript-Core

Die Datei fwt-core.js als allgemeine FWT-Grunddatei. Weitere JavaScript-Dateien sind modular getrennt.

Optionale JS-Module

Je nach Stand können zusätzliche Module enthalten sein, zum Beispiel Navigation, Doku-Kopierfunktion, Medien-Einwilligung oder MiniEditor.

assets/
├── css/
│   └── fwt.css
└── js/
    ├── fwt-core.js
    ├── fwt-doc-copy.js
    ├── fwt-media-consent.js
    ├── fwt-minieditor.js
    └── fwt-navigation.js
Die genaue Dateiliste kann sich in späteren Versionen ändern. Änderungen werden künftig in einer Versionsübersicht dokumentiert.

Was im Core-Paket nicht enthalten ist

Das Core-Paket ist die FWT-Grundlage. Einzelne Tools und größere Module werden getrennt gepflegt, damit das Grundpaket übersichtlich bleibt.

Nicht enthalten sind echte Zugangsdaten, lokale Konfigurationen, Passwörter, Logs oder private Testdateien.
Eigenständige Tools wie Kontakt-Modal oder Passwortgenerator sollen eigene Tool-Pakete, eigene Dokumentation und eigene Downloads bekommen.
Rechtstexte, Newsletter-System, Adminbereiche oder Datenbankfunktionen gehören nicht in das Core-Paket.

FWT nach dem Download einbinden

Nach dem Entpacken legst du die Dateien in deinem Projekt ab. Wichtig ist, dass der Browser die Dateien erreichen kann.

Beispiel, wenn FWT im eigenen Projekt unter assets liegt:

<link rel="stylesheet" href="/assets/css/fwt.css">

<script src="/assets/js/fwt-core.js" defer></script>

Wenn dein Projekt in einem Unterordner liegt, muss der Browserpfad entsprechend angepasst werden:

<link rel="stylesheet" href="/mein-projekt/assets/css/fwt.css">

<script src="/mein-projekt/assets/js/fwt-core.js" defer></script>
JavaScript ist modular. Binde nur die Dateien ein, die dein Projekt wirklich benötigt.

FWT online testen

Für schnelle Tests kann FWT auch direkt von Freie Webtools geladen werden. Das ist praktisch zum Ausprobieren, aber für echte Projekte nicht die beste Dauerlösung.

<link rel="stylesheet" href="https://freiewebtools.de/fwt/assets/css/fwt.css">

<script src="https://freiewebtools.de/fwt/assets/js/fwt-core.js" defer></script>
Für produktive Projekte empfehlen wir den Download, damit die Dateien unter eigener Kontrolle bleiben.

FWT wird schrittweise veröffentlicht

FWT soll nicht als unfertige Großbaustelle erscheinen. Besser ist ein klarer Versionsweg: erst eine nutzbare Basis, danach gezielte Erweiterungen.

FWT 0.1 · Core

Erste öffentliche Basis mit Farben, Design-Tokens, Grundlayout, Typografie, Buttons, Karten und einfachen Hilfsklassen.

FWT 0.2 · Komponenten

Erweiterung um weitere Elemente wie Alerts, Formulare, Eingaben, Bildbereiche, Infoboxen und nützliche Utility-Klassen.

FWT 0.3 · Beispiele

Mehr fertige Beispiele für typische Webseitenbereiche: Hero, Kontakt, Hinweise, CTA-Blöcke, Tool-Kacheln und kleine Layouts.

FWT 1.0 · stabiler Start

Erste stabile Version mit aufgeräumter Struktur, Dokumentation, Beispielen, Downloadpaket und verständlicher Änderungsübersicht.

Jede Version bekommt eine klare Beschreibung

Zu jeder neuen Version soll nachvollziehbar dokumentiert werden, was sich geändert hat. So können Nutzer entscheiden, ob und wann sie ein Update übernehmen möchten.

Neue Komponenten werden klar benannt.
Geänderte Klassen werden dokumentiert.
Wichtige Hinweise zur Kompatibilität werden sichtbar aufgeführt.
Beispiele werden passend zur neuen Version aktualisiert.

Über neue FWT-Versionen informiert bleiben

Später soll es einen kleinen FWT-Newsletter geben. Er informiert über neue Versionen, wichtige Änderungen und neue Beispiele. Keine Werbeflut, keine versteckten Tracking-Spielchen.

Der Newsletter wird erst aktiviert, wenn Anmeldung, Double-Opt-in, Abmeldung und Datenschutz sauber vorbereitet sind.

Wichtig: Der Newsletter braucht später Double-Opt-in, Abmeldelink, Datenschutzhinweis, Nachweisfunktion und eine einfache Verwaltung.

So prüfst du den Download

Wenn der Download nicht funktioniert, liegt meistens das ZIP nicht am erwarteten Ort oder der Browserpfad stimmt nicht.

1. Datei vorhanden?

Auf dem Server prüfen, ob die Datei wirklich im Downloadordner liegt.

2. Browserpfad prüfen

Den Download-Link direkt im Browser öffnen und schauen, ob eine ZIP-Datei geladen wird.

3. Inhalt prüfen

Das ZIP entpacken und prüfen, ob assets/css und assets/js enthalten sind.

Serverpfad:
 /var/www/chasalla-platform/fwt/fwt/downloads/fwt-core-v0.1.0.zip

Browserpfad:
 https://freiewebtools.de/fwt/downloads/fwt-core-v0.1.0.zip