Display · FWT Dokumentation

Utilities / Display

Display-Utilities

Display-Utilities steuern die grundlegende Darstellung von Elementen: block, inline, flex, grid, sichtbar, versteckt, gestapelt oder responsiv angepasst.

Sie sind praktisch für kleine Korrekturen und einfache Anordnungen. Größere Layouts sollten aber weiterhin mit Layout-, Komponenten- oder Musterklassen aufgebaut werden.

Wichtig: Wenn ein Bereich viele Display-Helfer braucht, ist wahrscheinlich eine eigene Komponente oder ein eigenes Muster sinnvoller.

Grundklassen

Display-Grundklassen

Grundklassen ändern die Darstellungsart eines Elements.

Live-Beispiel

Display-Grundklassen

fwt-d-block fwt-d-flex fwt-d-grid fwt-d-inline-flex

Display-Klassen ändern die grundlegende Darstellungsart eines Elements.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Display-Grundklassen</h3>

    <div class="fwt-d-flex fwt-flex-wrap fwt-gap-2 fwt-items-center">
        <span class="fwt-badge fwt-badge-primary">fwt-d-block</span>
        <span class="fwt-badge fwt-badge-info">fwt-d-flex</span>
        <span class="fwt-badge fwt-badge-success">fwt-d-grid</span>
        <span class="fwt-badge fwt-badge-warning">fwt-d-inline-flex</span>
    </div>

    <p class="fwt-card-text">
        Display-Klassen ändern die grundlegende Darstellungsart eines Elements.
    </p>
</div>

Sichtbarkeit

Sichtbarkeit und Deckkraft

Sichtbarkeits- und Deckkraftklassen helfen bei kleinen optischen Zuständen. Für barrierefreie Ausblendung bleibt fwt-sr-only der richtige Weg.

Live-Beispiel

Sichtbarkeit

Sichtbarkeitsklassen können Elemente ausblenden oder optisch abschwächen.

sichtbar 75% 50%

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Sichtbarkeit</h3>

    <p class="fwt-card-text">
        Sichtbarkeitsklassen können Elemente ausblenden oder optisch abschwächen.
    </p>

    <div class="fwt-badge-group">
        <span class="fwt-badge fwt-badge-success">sichtbar</span>
        <span class="fwt-badge fwt-badge-warning fwt-opacity-75">75%</span>
        <span class="fwt-badge fwt-badge-info fwt-opacity-50">50%</span>
    </div>
</div>

Flex

Flex-Helfer

Flex-Helfer eignen sich für kleine Reihen, Buttonbereiche, Badges, Toolbar-Elemente oder einfache Ausrichtungen.

Live-Beispiel

Flex-Anordnung

Links Mitte Rechts

Flex-Helfer eignen sich für kleine Reihen, Toolbar-Bereiche und Aktionsgruppen.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Flex-Anordnung</h3>

    <div class="fwt-d-flex fwt-flex-wrap fwt-gap-3 fwt-items-center fwt-justify-between">
        <span class="fwt-badge fwt-badge-primary">Links</span>
        <span class="fwt-badge fwt-badge-success">Mitte</span>
        <span class="fwt-badge fwt-badge-warning">Rechts</span>
    </div>

    <p class="fwt-card-text">
        Flex-Helfer eignen sich für kleine Reihen, Toolbar-Bereiche und Aktionsgruppen.
    </p>
</div>

Grid

Grid-Helfer

Grid-Helfer ermöglichen einfache zwei-, drei- oder vierspaltige Raster. Auf kleineren Bildschirmen brechen sie automatisch um.

Live-Beispiel

Grid 1

Einfache Raster lassen sich schnell aufbauen.

Grid 2

Die Spalten brechen responsiv um.

Grid 3

Gut für kleine Hilfsraster.

HTML-Code anzeigen

<div class="fwt-grid-3">
    <article class="fwt-card">
        <h3 class="fwt-card-title">Grid 1</h3>
        <p class="fwt-card-text">Einfache Raster lassen sich schnell aufbauen.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Grid 2</h3>
        <p class="fwt-card-text">Die Spalten brechen responsiv um.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Grid 3</h3>
        <p class="fwt-card-text">Gut für kleine Hilfsraster.</p>
    </article>
</div>

Auto-Grid

Automatische Raster

Auto-Grid ist gut für Bereiche, bei denen die Anzahl der Elemente schwankt, zum Beispiel Tool-Kacheln, Karten oder kleine Übersichten.

Live-Beispiel

Automatisch

Die Breite entscheidet über die Anzahl der Spalten.

Flexibel

Gut für Tool-Kacheln oder kleine Übersichten.

Responsiv

Ohne zusätzliche Klassen nutzbar.

Einfach

Für schnelle, aber saubere Anordnungen.

HTML-Code anzeigen

<div class="fwt-grid-auto">
    <article class="fwt-card">
        <h3 class="fwt-card-title">Automatisch</h3>
        <p class="fwt-card-text">Die Breite entscheidet über die Anzahl der Spalten.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Flexibel</h3>
        <p class="fwt-card-text">Gut für Tool-Kacheln oder kleine Übersichten.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Responsiv</h3>
        <p class="fwt-card-text">Ohne zusätzliche Klassen nutzbar.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Einfach</h3>
        <p class="fwt-card-text">Für schnelle, aber saubere Anordnungen.</p>
    </article>
</div>

Gap

Zwischenräume mit Gap

Gap-Klassen steuern Abstände innerhalb von Flex- oder Grid-Layouts.

Live-Beispiel

Gap / Zwischenräume

Element Element Element

Gap-Klassen steuern Abstände zwischen Flex- oder Grid-Elementen.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Gap / Zwischenräume</h3>

    <div class="fwt-d-flex fwt-flex-wrap fwt-gap-4">
        <span class="fwt-badge fwt-badge-primary">Element</span>
        <span class="fwt-badge fwt-badge-primary">Element</span>
        <span class="fwt-badge fwt-badge-primary">Element</span>
    </div>

    <p class="fwt-card-text">
        Gap-Klassen steuern Abstände zwischen Flex- oder Grid-Elementen.
    </p>
</div>

Platzierung

Platzierung und Selbst-Ausrichtung

Platzierungshelfer eignen sich für kleine Boxen, Medienflächen oder einfache Zentrierungen.

Live-Beispiel

Zentriert

Start

Ende

HTML-Code anzeigen

<div class="fwt-grid-3">
    <div class="fwt-card fwt-place-center" style="min-height: 8rem;">
        Zentriert
    </div>

    <div class="fwt-card fwt-place-start" style="min-height: 8rem;">
        Start
    </div>

    <div class="fwt-card fwt-place-end" style="min-height: 8rem;">
        Ende
    </div>
</div>

Stack

Stack-Helfer

Stack-Helfer setzen Elemente untereinander und geben ihnen einen einheitlichen Abstand.

Live-Beispiel

Stack-Helfer

Erster Hinweis

Elemente stehen untereinander.

Zweiter Hinweis

Der Abstand kommt über die Stack-Klasse.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Stack-Helfer</h3>

    <div class="fwt-stack">
        <div class="fwt-alert fwt-alert-info fwt-alert-compact">
            <h4 class="fwt-alert-title">Erster Hinweis</h4>
            <p class="fwt-alert-text">Elemente stehen untereinander.</p>
        </div>

        <div class="fwt-alert fwt-alert-success fwt-alert-compact">
            <h4 class="fwt-alert-title">Zweiter Hinweis</h4>
            <p class="fwt-alert-text">Der Abstand kommt über die Stack-Klasse.</p>
        </div>
    </div>
</div>

Row

Reihen-Helfer

Row-Helfer eignen sich für kleine Kopfzeilen, Aktionszeilen, Statuszeilen oder Buttonbereiche.

Live-Beispiel

Row-Helfer

aktiv Release I

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Row-Helfer</h3>

    <div class="fwt-row fwt-row-between">
        <div class="fwt-badge-group">
            <span class="fwt-badge fwt-badge-success">aktiv</span>
            <span class="fwt-badge fwt-badge-info">Release I</span>
        </div>

        <div class="fwt-btn-group">
            <button class="fwt-btn fwt-btn-secondary" type="button">Vorschau</button>
            <button class="fwt-btn fwt-btn-primary" type="button">Speichern</button>
        </div>
    </div>
</div>

Responsive

Responsive Display-Helfer

Responsive Display-Helfer können Elemente auf bestimmten Bildschirmgrößen ausblenden, umstellen oder stapeln.

Live-Beispiel

Responsive Stack

Hauptaktion Nebenaktion Weitere Info

Auf kleineren Bildschirmen werden die Elemente untereinander gestapelt.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Responsive Stack</h3>

    <div class="fwt-d-flex fwt-gap-3 fwt-stack-md-down">
        <a class="fwt-btn fwt-btn-primary" href="#">Hauptaktion</a>
        <a class="fwt-btn fwt-btn-secondary" href="#">Nebenaktion</a>
        <a class="fwt-btn fwt-btn-light" href="#">Weitere Info</a>
    </div>

    <p class="fwt-card-text">
        Auf kleineren Bildschirmen werden die Elemente untereinander gestapelt.
    </p>
</div>

Druck

Display-Helfer für Druck

Druck-Helfer sind nützlich, wenn Buttons, Navigationen oder reine Bildschirmhinweise im Ausdruck nicht erscheinen sollen.

Live-Beispiel

Druck-Helfer

Manche Elemente sollen im Druck verschwinden, andere sollen sichtbar bleiben.

fwt-d-print-none fwt-d-print-block

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Druck-Helfer</h3>

    <p class="fwt-card-text">
        Manche Elemente sollen im Druck verschwinden, andere sollen sichtbar bleiben.
    </p>

    <div class="fwt-badge-group">
        <span class="fwt-badge fwt-badge-warning">fwt-d-print-none</span>
        <span class="fwt-badge fwt-badge-info">fwt-d-print-block</span>
    </div>
</div>

Hinweise

Display-Utilities richtig verwenden

Nicht alles damit bauen

Display-Utilities sind Helfer. Große Layouts sollten eigene Strukturklassen bekommen.

Komponente statt Utility-Kette

Responsiv prüfen

Klassen wie fwt-stack-md-down müssen im echten Layout getestet werden.

fwt-stack-md-down

Sichtbarkeit bewusst nutzen

Unsichtbare Inhalte können für Screenreader weiterhin relevant sein.

fwt-sr-only statt display:none

Druck bedenken

Navigationen und Buttons sind im Druck oft überflüssig.

fwt-d-print-none

Grid für einfache Raster

Für komplexe Seitenlayouts sind Layout- oder Musterklassen besser.

fwt-grid-auto

Doppelte Klassen später aufräumen

Einige Display-Helfer können auch noch in Helpers stehen. Das kann später bereinigt werden.

display.css als offizieller Ort