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

Layout / Grid

Grid in FWT

Das Grid teilt Inhalte innerhalb eines Containers auf. Während Container bestimmen, wie breit ein Inhaltsbereich ist, bestimmt das Grid, wie dieser Bereich in Spalten aufgeteilt wird.

FWT bietet dafür zwei Wege: ein genaues 12er Raster mit fwt-row und fwt-col-* sowie einfache automatische Grids für Karten, Tool-Kacheln und Übersichten.

Container begrenzen die Breite. Grid teilt diese Breite auf.

Grid / Übersicht

Das 12er Raster sichtbar erklärt

Eine Zeile besteht aus 12 Teilen. Spalten können diese 12 Teile unterschiedlich aufteilen. So entstehen flexible Layouts wie 6/6, 4/8 oder 3/6/3.

12er Raster

Eine Zeile besteht aus 12 gleich großen Teilen.

1
2
3
4
5
6
7
8
9
10
11
12
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-1">1</div>
    <div class="fwt-col-1">2</div>
    <div class="fwt-col-1">3</div>
    <div class="fwt-col-1">4</div>
    <div class="fwt-col-1">5</div>
    <div class="fwt-col-1">6</div>
    <div class="fwt-col-1">7</div>
    <div class="fwt-col-1">8</div>
    <div class="fwt-col-1">9</div>
    <div class="fwt-col-1">10</div>
    <div class="fwt-col-1">11</div>
    <div class="fwt-col-1">12</div>
</div>

Halb / Halb

Zwei gleich große Bereiche. 6 + 6 = 12.

fwt-col-6
fwt-col-6
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-6">Links</div>
    <div class="fwt-col-6">Rechts</div>
</div>

Klein / Groß

Kleiner Nebenbereich und großer Hauptbereich. 4 + 8 = 12.

fwt-col-4
fwt-col-8
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-4">Nebenbereich</div>
    <div class="fwt-col-8">Hauptbereich</div>
</div>

Sidebar / Inhalt / Sidebar

Drei Bereiche mit starkem Mittelteil. 3 + 6 + 3 = 12.

fwt-col-3
fwt-col-6
fwt-col-3
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-3">Links</div>
    <div class="fwt-col-6">Inhalt</div>
    <div class="fwt-col-3">Rechts</div>
</div>

Vier gleiche Spalten

Gut für Karten, Kacheln oder kurze Übersichten. 3 + 3 + 3 + 3 = 12.

fwt-col-3
fwt-col-3
fwt-col-3
fwt-col-3
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-3">1</div>
    <div class="fwt-col-3">2</div>
    <div class="fwt-col-3">3</div>
    <div class="fwt-col-3">4</div>
</div>
Merksatz: Alle Spalten in einer Zeile sollten zusammen 12 ergeben. Beispiel: 4 + 8 = 12 oder 3 + 6 + 3 = 12.

Row / Col

Row und Col verwenden

Eine fwt-row ist die Zeile. Innerhalb dieser Zeile liegen die Spalten, zum Beispiel fwt-col-6 und fwt-col-6.

Live-Beispiel
Linker Bereich · fwt-col-6
Rechter Bereich · fwt-col-6
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-6">
        <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
            Linker Bereich · fwt-col-6
        </div>
    </div>

    <div class="fwt-col-6">
        <div class="fwt-frame fwt-bg-info-soft fwt-border-info">
            Rechter Bereich · fwt-col-6
        </div>
    </div>
</div>
fwt-row fasst Spalten zusammen.
fwt-col-6 nimmt 6 von 12 Teilen ein.
Zwei Spalten mit fwt-col-6 ergeben zusammen eine volle Zeile.

Aufteilungen

Typische Grid-Aufteilungen

Viele Webseiten brauchen immer wieder ähnliche Aufteilungen. Diese Beispiele stehen bewusst breit untereinander, damit man die Spalten wirklich erkennt.

Text und Infobox

Gut für erklärende Inhalte mit einer Zusatzbox daneben.

Live-Beispiel
Haupttext · fwt-col-8
Infobox · fwt-col-4
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-8">
        <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
            Haupttext · fwt-col-8
        </div>
    </div>

    <div class="fwt-col-4">
        <div class="fwt-frame fwt-bg-info-soft fwt-border-info">
            Infobox · fwt-col-4
        </div>
    </div>
</div>

Sidebar und Inhalt

Klassisches Layout für Navigation links und Inhalt rechts.

Live-Beispiel
Inhalt · fwt-col-9
HTML-Code anzeigen 
<div class="fwt-row">
    <aside class="fwt-col-3">
        <div class="fwt-frame fwt-bg-secondary-soft fwt-border-secondary">
            Sidebar · fwt-col-3
        </div>
    </aside>

    <main class="fwt-col-9">
        <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
            Inhalt · fwt-col-9
        </div>
    </main>
</div>

Drei gleichmäßige Bereiche

Gut für Vorteile, Einstiege, Themenblöcke oder kurze Übersichten.

Live-Beispiel
Bereich 1 · fwt-col-4
Bereich 2 · fwt-col-4
Bereich 3 · fwt-col-4
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-4">
        <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
            Bereich 1 · fwt-col-4
        </div>
    </div>

    <div class="fwt-col-4">
        <div class="fwt-frame fwt-bg-success-soft fwt-border-success">
            Bereich 2 · fwt-col-4
        </div>
    </div>

    <div class="fwt-col-4">
        <div class="fwt-frame fwt-bg-warning-soft fwt-border-warning">
            Bereich 3 · fwt-col-4
        </div>
    </div>
</div>

Ein Drittel / zwei Drittel

Gut für Bild + Text, Formular + Erklärung oder kleine Toolbereiche.

Live-Beispiel
Nebeninhalt · fwt-col-4
Hauptinhalt · fwt-col-8
HTML-Code anzeigen 
<div class="fwt-row">
    <div class="fwt-col-4">
        <div class="fwt-frame fwt-bg-info-soft fwt-border-info">
            Nebeninhalt · fwt-col-4
        </div>
    </div>

    <div class="fwt-col-8">
        <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
            Hauptinhalt · fwt-col-8
        </div>
    </div>
</div>

Automatische Grids

Einfachere Grids für Karten und Übersichten

Nicht jeder Nutzer möchte Spalten berechnen. Für Karten, Tool-Kacheln oder kleine Übersichten sind automatische Grids oft einfacher.

Zwei Spalten

Für einfache Gegenüberstellungen.

Live-Beispiel
Box 1
Box 2
HTML-Code anzeigen 
<div class="fwt-grid fwt-grid-2">
    <article class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Box 1
    </article>

    <article class="fwt-frame fwt-bg-info-soft fwt-border-info">
        Box 2
    </article>
</div>

Drei Spalten

Für Karten, Vorteile oder kleine Übersichten.

Live-Beispiel
Box 1
Box 2
Box 3
HTML-Code anzeigen 
<div class="fwt-grid fwt-grid-3">
    <article class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Box 1
    </article>

    <article class="fwt-frame fwt-bg-success-soft fwt-border-success">
        Box 2
    </article>

    <article class="fwt-frame fwt-bg-warning-soft fwt-border-warning">
        Box 3
    </article>
</div>

Vier Spalten

Für kompakte Übersichten auf breiteren Bildschirmen.

Live-Beispiel
Box 1
Box 2
Box 3
Box 4
HTML-Code anzeigen 
<div class="fwt-grid fwt-grid-4">
    <article class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Box 1
    </article>

    <article class="fwt-frame fwt-bg-info-soft fwt-border-info">
        Box 2
    </article>

    <article class="fwt-frame fwt-bg-success-soft fwt-border-success">
        Box 3
    </article>

    <article class="fwt-frame fwt-bg-warning-soft fwt-border-warning">
        Box 4
    </article>
</div>

Automatisch

Für flexible Karten, die sich anhand der Breite selbst verteilen.

Live-Beispiel
Box 1
Box 2
Box 3
Box 4
HTML-Code anzeigen 
<div class="fwt-grid fwt-grid-auto">
    <article class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Box 1
    </article>

    <article class="fwt-frame fwt-bg-info-soft fwt-border-info">
        Box 2
    </article>

    <article class="fwt-frame fwt-bg-success-soft fwt-border-success">
        Box 3
    </article>

    <article class="fwt-frame fwt-bg-warning-soft fwt-border-warning">
        Box 4
    </article>
</div>
Automatische Grids sind für viele normale Seitenbereiche einfacher als manuell berechnete 12er-Spalten.

Responsive

Grid auf kleinen Bildschirmen

Ein gutes Grid darf auf kleinen Bildschirmen nicht stur nebeneinander bleiben. Spalten müssen sich untereinander anordnen oder automatische Grids müssen weniger Spalten anzeigen.

12er-Spalten

Feste Spalten wie fwt-col-6 fallen auf kleinen Bildschirmen untereinander.

<div class="fwt-col-6">...</div>

Automatische Grids

Automatische Grids verteilen Karten je nach verfügbarer Breite.

<div class="fwt-grid fwt-grid-auto">...</div>

Spätere Ausbaustufe

Falls nötig, können später responsive Klassen wie fwt-md-col-6 ergänzt werden.

fwt-md-col-6
Für den ersten Schritt reicht ein sauberes Grundraster. Responsive Spezialklassen werden erst ergänzt, wenn die Basis stabil steht.

Nutzung

Welche Grid-Klasse nehme ich?

Genaue Aufteilung

Wenn du exakt bestimmen willst, wie breit Bereiche sind.

<div class="fwt-row"><div class="fwt-col-4">...</div><div class="fwt-col-8">...</div></div>

Karten und Kacheln

Wenn mehrere ähnliche Elemente übersichtlich verteilt werden sollen.

<div class="fwt-grid fwt-grid-3">...</div>

Flexible Übersichten

Wenn die Anzahl der Spalten automatisch zur verfügbaren Breite passen soll.

<div class="fwt-grid fwt-grid-auto">...</div>
Wenn du genau weißt, wie breit die Bereiche sein sollen, nutze fwt-row und fwt-col-*. Wenn du nur Karten sauber verteilen willst, ist ein automatisches Grid meistens einfacher.