Layoutmuster · FWT Dokumentation

Layout / Layoutmuster

Layoutmuster in FWT

Layoutmuster sind vorbereitete Grundaufteilungen für typische Seitenbereiche. Sie helfen, schneller gute Strukturen zu bauen, ohne jedes Layout von null neu zusammenzusetzen.

Sie ersetzen nicht das Grid. Sie nutzen Grid und Container im Hintergrund, damit häufige Layouts einfacher werden.

Merksatz: Container begrenzen die Breite, Grid teilt auf, Layoutmuster liefern typische fertige Aufteilungen.

Split

Split-Layout

Das Split-Layout teilt einen Bereich in zwei starke Spalten. Es eignet sich für Text/Bild, Erklärung/Aktion oder Intro/Formular.

Live-Beispiel

Linker Bereich

Rechter Bereich

HTML-Code anzeigen

<div class="fwt-layout-split">
    <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Linker Bereich
    </div>

    <div class="fwt-frame fwt-bg-info-soft fwt-border-info">
        Rechter Bereich
    </div>
</div>

Tool

Tool-Layout

Das Tool-Layout ist für Webtools gedacht: Eingabe auf der einen Seite, Ergebnis oder Auswertung auf der anderen Seite.

Live-Beispiel

Eingabe / Formular

Ergebnis / Ausgabe

HTML-Code anzeigen

<div class="fwt-layout-tool">
    <div class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Eingabe / Formular
    </div>

    <div class="fwt-frame fwt-bg-success-soft fwt-border-success">
        Ergebnis / Ausgabe
    </div>
</div>

Blog

Blog-Layout

Das Blog-Layout bietet einen breiten Hauptbereich und eine Sidebar. Es eignet sich für Artikel, Doku-Seiten, News oder Inhaltsseiten mit Zusatznavigation.

Live-Beispiel

Hauptartikel / Inhalt

HTML-Code anzeigen

<div class="fwt-layout-blog">
    <main class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Hauptartikel / Inhalt
    </main>

    <aside class="fwt-frame fwt-bg-info-soft fwt-border-info">
        Sidebar
    </aside>
</div>

Dashboard

Dashboard-Layout

Das Dashboard-Layout verteilt mehrere Karten automatisch. Es eignet sich für Adminbereiche, Kennzahlen, Modulübersichten oder Statusseiten.

Live-Beispiel

Kennzahl 1

Kennzahl 2

Kennzahl 3

Hinweis

HTML-Code anzeigen

<div class="fwt-layout-dashboard">
    <article class="fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Kennzahl 1
    </article>

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

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

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

Magazin

Magazin-Layout

Das Magazin-Layout kombiniert große und kleinere Inhaltsflächen. Es eignet sich für Startseiten, Newsbereiche, Blogübersichten oder redaktionell wirkende Seiten.

Live-Beispiel

Großer Hauptbeitrag

Beitrag 1

Beitrag 2

Beitrag 3

HTML-Code anzeigen

<div class="fwt-layout-magazine">
    <article class="fwt-layout-magazine-feature fwt-frame fwt-bg-primary-soft fwt-border-primary">
        Großer Hauptbeitrag
    </article>

    <aside class="fwt-layout-magazine-side fwt-frame fwt-bg-info-soft fwt-border-info">
        Seitenbeitrag
    </aside>

    <article class="fwt-layout-magazine-third fwt-frame fwt-bg-success-soft fwt-border-success">
        Beitrag 1
    </article>

    <article class="fwt-layout-magazine-third fwt-frame fwt-bg-warning-soft fwt-border-warning">
        Beitrag 2
    </article>

    <article class="fwt-layout-magazine-third fwt-frame fwt-bg-danger-soft fwt-border-danger">
        Beitrag 3
    </article>
</div>

Nutzung

Welches Layoutmuster nehme ich?

Split

Für zwei gleichwertige Bereiche, zum Beispiel Text und Bild.

<div class="fwt-layout-split">...</div>

Tool

Für Eingabe und Ergebnis, Rechner, Generatoren oder Auswertungen.

<div class="fwt-layout-tool">...</div>

Blog

Für Hauptinhalt mit Sidebar.

<div class="fwt-layout-blog">...</div>

Dashboard

Für Karten, Kennzahlen, Module oder Statusanzeigen.

<div class="fwt-layout-dashboard">...</div>

Magazin

Für größere und kleinere Inhaltsflächen in einer redaktionellen Optik.

<div class="fwt-layout-magazine">...</div>