Dokumentation

Layout / Columns

Columns in FWT

Columns sind für mehrspaltige Inhalte gedacht. Sie eignen sich besonders für Texte, Listen oder einfache redaktionelle Bereiche, die wie in einem Magazin oder einer Zeitung wirken sollen.

Anders als Grid teilen Columns den Inhalt nicht in feste Layoutzellen. Der Inhalt fließt automatisch von einer Spalte in die nächste.

Einordnung

Columns oder Grid?

Spaltenanzahl

Zwei oder drei Spalten

Zwei Spalten sind für längere Texte oft angenehmer. Drei Spalten eignen sich eher für kurze Textblöcke, Linklisten oder kompakte Übersichten.

<div class="fwt-columns-2 fwt-columns-text">
    <p>
        FWT-Columns eignen sich für längere Texte, die wie in einem Magazin
        oder einer Zeitung in mehrere Spalten fließen sollen.
    </p>

    <p>
        Der Inhalt wird nicht fest in einzelne Grid-Bereiche gesetzt, sondern
        läuft automatisch von einer Spalte in die nächste.
    </p>

    <p>
        Das ist besonders nützlich für redaktionelle Inhalte, erklärende Texte
        oder kurze Inhaltsübersichten.
    </p>
</div>

<div class="fwt-columns-3 fwt-columns-text">
    <p>Erster kurzer Inhaltsblock mit erklärendem Text.</p>
    <p>Zweiter kurzer Inhaltsblock für weitere Informationen.</p>
    <p>Dritter kurzer Inhaltsblock mit ergänzendem Hinweis.</p>
    <p>Vierter kurzer Inhaltsblock, der automatisch weiterfließt.</p>
</div>

Trennlinien

Spalten mit Trennlinie

Bei mehrspaltigen Texten kann eine dezente Trennlinie helfen. Sie sollte aber nicht überall eingesetzt werden.

<div class="fwt-columns-2 fwt-columns-rule fwt-columns-text">
    <p>
        Eine Trennlinie kann helfen, wenn mehrere Textspalten klarer
        voneinander getrennt werden sollen.
    </p>

    <p>
        Sie sollte sparsam eingesetzt werden, damit die Seite nicht zu technisch
        oder überladen wirkt.
    </p>

    <p>
        Besonders bei längeren Texten kann eine dezente Linie die Orientierung
        verbessern.
    </p>
</div>

Listen / FAQ

Kurze Blöcke mehrspaltig darstellen

Columns können auch für kurze FAQ- oder Hinweisblöcke genutzt werden. Mit fwt-columns-avoid-break werden einzelne Blöcke nicht unschön zwischen Spalten getrennt.

<div class="fwt-columns-3 fwt-columns-avoid-break">
    <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Frage 1<br>
        Kurze Antwort oder Hinweis.
    </div>

    <div class="fwt-frame fwt-bg-info-soft fwt-border-info">
        Frage 2<br>
        Kurze Antwort oder Hinweis.
    </div>

    <div class="fwt-frame fwt-bg-success-soft fwt-border-success">
        Frage 3<br>
        Kurze Antwort oder Hinweis.
    </div>

    <div class="fwt-frame fwt-bg-warning-soft fwt-border-warning">
        Frage 4<br>
        Kurze Antwort oder Hinweis.
    </div>
</div>

Responsive

Columns auf kleinen Bildschirmen

Auf kleineren Bildschirmen werden Columns automatisch reduziert. Vier und drei Spalten werden zuerst weniger, auf sehr kleinen Geräten bleibt nur eine Spalte übrig.

Nutzung

Welche Columns-Klasse nehme ich?