Dokumentation

2. Einbindung von FWT

FWT in eine Webseite einbinden

FWT kann auf zwei Arten genutzt werden: direkt online von Freie Webtools oder als heruntergeladenes Paket vom eigenen Server. Beide Varianten haben ihren Zweck.

Für einen schnellen Test ist die Online-Einbindung praktisch. Für echte Webseiten, Kundenprojekte und dauerhaft genutzte Tools empfehlen wir dagegen den Download und die Auslieferung vom eigenen Server.

Variante 1

FWT online einbinden

Bei der Online-Einbindung werden die FWT-Dateien direkt von freiewebtools.de geladen. Das ist die einfachste Möglichkeit, FWT schnell auszuprobieren.

Füge die CSS-Datei im Kopfbereich deiner HTML- oder PHP-Datei ein:

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

Wenn du FWT-Bausteine nutzt, die JavaScript benötigen, kannst du zusätzlich die FWT-JavaScript-Datei vor dem schließenden </body> oder mit defer im Kopfbereich einbinden:

<script src="https://freiewebtools.de/fwt/assets/js/fwt-core.js" defer></script>

Direkte Prüflinks:

Variante 2

FWT herunterladen und selbst hosten

Für echte Webseiten und Projekte ist es besser, FWT herunterzuladen und die Dateien vom eigenen Server auszuliefern. Dadurch behältst du Kontrolle über Version, Dateien, Änderungen und Verfügbarkeit.

Nach dem Download legst du die FWT-Dateien zum Beispiel in deinem Projekt unter assets/css und assets/js ab.

Beispiel für eine lokale Einbindung nach dem Download:

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

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

Wenn FWT in einem Unterordner liegt, muss der Pfad entsprechend angepasst werden:

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

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

Wichtig

Serverpfad und Browserpfad sind nicht dasselbe

Ein häufiger Fehler entsteht dadurch, dass der interne Serverpfad mit dem öffentlichen Browserpfad verwechselt wird.

Der Serverpfad beschreibt, wo eine Datei wirklich auf dem Server liegt. Der Browserpfad beschreibt, unter welcher Adresse die Datei im Web erreichbar ist.

Für die Einbindung in HTML, PHP oder Templates zählt immer der Pfad, den der Browser erreichen kann.

Beispiel

Einbindung innerhalb der FWT-Dokumentation

Diese Dokumentation gehört zur FWT-Webseite. Deshalb kann sie die FWT-Dateien direkt aus dem FWT-Bereich laden.

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

Falls JavaScript-Bausteine benötigt werden:

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

Mini-Beispiel

Eine kleine FWT-Fläche

Nach der Einbindung kannst du FWT-Klassen nutzen, um einfache Bereiche aufzubauen.

<section class="fwt-section">
    <div class="fwt-container">
        <p class="fwt-kicker">Beispiel</p>

        <h1>Meine erste FWT-Seite</h1>

        <p>
            Diese Fläche nutzt FWT für Abstände, Grundgestaltung
            und eine saubere Struktur.
        </p>

        <a class="fwt-button fwt-button--primary" href="#">
            Mehr erfahren
        </a>
    </div>
</section>

Prüfung

So prüfst du, ob FWT geladen wird

Wenn eine Seite aussieht wie ungestyltes HTML, wird die CSS-Datei meistens nicht geladen oder eine importierte CSS-Datei fehlt.

body {
    background: red !important;
}