Container · FWT Dokumentation

Layout / Container

Container in FWT

Container begrenzen die Inhaltsbreite einer Seite. Ohne Container werden Texte, Karten oder Formulare auf großen Bildschirmen schnell zu breit und schwer lesbar.

FWT bietet deshalb mehr als nur einen normalen und einen fluiden Container. Unterschiedliche Inhalte brauchen unterschiedliche Breiten.

Grundregel: Erst Section für den Seitenabschnitt, dann Container für die Inhaltsbreite, danach Grid oder Komponenten für die Aufteilung.

Section

Sections als Seitenabschnitte

Eine Section ist der äußere Seitenabschnitt. Sie gibt einem Bereich vertikale Luft und kann später auch Hintergrundfarben oder besondere Abschnitte tragen.

Live-Beispiel

Inhalt innerhalb einer Section

HTML-Code anzeigen

<section class="fwt-section">
    <div class="fwt-container">
        Inhalt innerhalb einer Section
    </div>
</section>

fwt-section ist der normale Seitenabschnitt.

fwt-section-sm, fwt-section-lg und fwt-section-xl verändern die vertikale Größe.

Breitenvergleich

Container im Browserfenster

Diese Darstellung zeigt die Containerbreiten wie in einem vereinfachten Browserfenster. So wird sofort sichtbar, warum FWT mehrere Containergrößen anbietet.

XS 420px

fwt-container-xs

SM 640px

fwt-container-sm

MD 768px

fwt-container-md

Reader 780px

fwt-container-reader

Standard 1024px

fwt-container

LG 1200px

fwt-container-lg

XL 1440px

fwt-container-xl

Wide 1600px

fwt-container-wide

Diese Übersicht ist eine schematische Darstellung. Die echten Container reagieren zusätzlich auf die verfügbare Bildschirmbreite.

Breiten

Containerbreiten sichtbar erklärt

Die folgenden Beispiele zeigen, wie breit die jeweiligen Container im Vergleich zur verfügbaren Fläche wirken. Die farbige Fläche ist nur die Doku-Darstellung, damit der Unterschied sichtbar wird.

fwt-container-xs

XS

Sehr schmal. Gut für Loginboxen, Newsletter, kleine Formulare oder Bestätigungen.

<div class="fwt-container-xs">Inhalt im XS-Container</div>

fwt-container-sm

SM

Schmal. Gut für kurze Erklärungen, kleine Inhaltsbereiche oder einfache Formulare.

<div class="fwt-container-sm">Inhalt im SM-Container</div>

fwt-container-md

MD

Mittelbreit. Gut für normale Text- und Inhaltsseiten.

<div class="fwt-container-md">Inhalt im MD-Container</div>

fwt-container-reader

Reader

Lesebreite. Gut für Blogartikel, Dokumentation, längere Texte und rechtliche Hinweise.

<div class="fwt-container-reader">Inhalt im Reader-Container</div>

fwt-container

Standard

Standardbreite für normale Webseitenbereiche, Kartenbereiche und einfache Layoutabschnitte.

<div class="fwt-container">Inhalt im Standardcontainer</div>

fwt-container-lg

LG

Breit. Gut für Produktübersichten, Toolseiten oder mehrere Karten nebeneinander.

<div class="fwt-container-lg">Inhalt im LG-Container</div>

fwt-container-xl

XL

Sehr breit. Gut für Dashboards, große Übersichten und breite Inhaltsbereiche.

<div class="fwt-container-xl">Inhalt im XL-Container</div>

fwt-container-wide

Wide

Extra breit. Gut für Adminbereiche, große Toolseiten und komplexere Layouts.

<div class="fwt-container-wide">Inhalt im Wide-Container</div>

Volle Breite

Full und Bleed

Manchmal soll ein Bereich über die normale Inhaltsbreite hinausgehen. Dafür gibt es zwei unterschiedliche Wege.

fwt-container-full

Full

Volle Breite mit Innenabstand. Der Inhalt klebt nicht am Rand.

<div class="fwt-container-full">Volle Breite mit Innenabstand</div>

fwt-container-bleed

Bleed

Volle Breite ohne Begrenzung und ohne Innenabstand. Nur gezielt einsetzen.

<div class="fwt-container-bleed">Volle Breite ohne Innenabstand</div>

fwt-container-bleed sollte sparsam genutzt werden. Sonst wirkt eine Seite schnell unruhig und schwer kontrollierbar.

Stack

Container und Boxen stapeln

Mit einem Stack können mehrere Boxen sauber untereinander angeordnet werden, ohne jeder Box einzeln Außenabstand zu geben.

Live-Beispiel

Erster Inhaltsblock

Zweiter Inhaltsblock

Dritter Inhaltsblock

HTML-Code anzeigen

<div class="fwt-container-stack">
    <div class="fwt-container-box">Erster Inhaltsblock</div>
    <div class="fwt-container-box">Zweiter Inhaltsblock</div>
    <div class="fwt-container-box">Dritter Inhaltsblock</div>
</div>

fwt-container-stack nutzt einen normalen Abstand zwischen den Elementen.

fwt-container-stack-sm, fwt-container-stack-lg und fwt-container-stack-xl verändern den Abstand.

Boxen

Einfache Container-Boxen

fwt-container-box ist eine neutrale Layoutbox. Sie ist keine vollständige Card-Komponente, sondern eine einfache Box für Abschnitte, Demos oder kleine Inhaltsbereiche.

Live-Beispiel

Normale Container-Box

Weiche Container-Box

Gedämpfte Container-Box

HTML-Code anzeigen

<div class="fwt-container-box">
    Normale Container-Box
</div>

<div class="fwt-container-box fwt-container-box-soft">
    Weiche Container-Box
</div>

<div class="fwt-container-box fwt-container-box-muted">
    Gedämpfte Container-Box
</div>

Nutzung

Welchen Container nehme ich?

Kleine Formulare

Für Login, Newsletter, kurze Eingaben oder Bestätigungen.

<div class="fwt-container-xs">...</div>

Lange Texte

Für Artikel, Dokumentation, rechtliche Hinweise oder Erklärseiten.

<div class="fwt-container-reader">...</div>

Normale Seiten

Für Standardbereiche, Karten und normale Webseitenabschnitte.

<div class="fwt-container">...</div>

Tools und Dashboards

Für breite Oberflächen mit vielen Informationen.

<div class="fwt-container-wide">...</div>

Wenn du unsicher bist, starte mit fwt-container. Für lange Texte ist fwt-container-reader meistens besser.