Hilfsklassen / Helpers · FWT Dokumentation

Helpers / Utilities

Hilfsklassen in FWT

Hilfsklassen sind kleine praktische CSS-Klassen für häufige Korrekturen: Sichtbarkeit, Raster, Ausrichtung, Text, Abstände, Breiten, Medienflächen oder responsive Anpassungen.

Sie sind bewusst kleiner gehalten als bei großen Utility-Frameworks. FWT soll hilfreich bleiben, aber nicht in hunderten Einzelklassen ausarten.

Wichtig: Helpers ergänzen Komponenten. Sie ersetzen keine sauber gebauten Buttons, Cards, Formulare oder Muster.

Sichtbarkeit

Sichtbarkeit und Screenreader

fwt-sr-only versteckt Inhalte visuell, hält sie aber für Screenreader verfügbar. Das ist besonders für Labels bei Icon-Buttons, Suchfeldern oder kompakten Formularen wichtig.

Live-Beispiel

Sichtbare Überschrift

Das folgende Label ist visuell versteckt, bleibt aber für Screenreader vorhanden.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">
        Sichtbare Überschrift
    </h3>

    <p class="fwt-card-text">
        Das folgende Label ist visuell versteckt, bleibt aber für Screenreader vorhanden.
    </p>

    <label class="fwt-sr-only" for="helper-search-demo">
        Suche
    </label>

    <input
        class="fwt-input"
        id="helper-search-demo"
        type="search"
        placeholder="Suche mit verstecktem Label"
    >
</div>

Display / Flex

Display- und Flex-Helfer

Display- und Flex-Helfer sind praktisch, wenn kleine Anordnungen schnell korrigiert oder ausgerichtet werden sollen.

Live-Beispiel

Flex Wrap Gap Center

HTML-Code anzeigen

<div class="fwt-card">
    <div class="fwt-d-flex fwt-flex-wrap fwt-gap-2 fwt-items-center">
        <span class="fwt-badge fwt-badge-primary">Flex</span>
        <span class="fwt-badge fwt-badge-success">Wrap</span>
        <span class="fwt-badge fwt-badge-info">Gap</span>
        <span class="fwt-badge fwt-badge-warning">Center</span>
    </div>
</div>

Für größere Layouts sollten weiterhin richtige Layout- oder Komponentenklassen genutzt werden.

Grid

Grid-Helfer

Die Grid-Helfer eignen sich für einfache Raster mit zwei, drei oder vier Spalten sowie automatische Raster.

Live-Beispiel

Spalte 1

Grid-Helfer für einfache Raster.

Spalte 2

Responsiv ohne Extra-Markup.

Spalte 3

Gut für kleine Hilfsraster.

HTML-Code anzeigen

<div class="fwt-grid-3">
    <article class="fwt-card">
        <h3 class="fwt-card-title">Spalte 1</h3>
        <p class="fwt-card-text">Grid-Helfer für einfache Raster.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Spalte 2</h3>
        <p class="fwt-card-text">Responsiv ohne Extra-Markup.</p>
    </article>

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

Text

Text-Helfer

Text-Helfer steuern kleine Dinge wie Farbe, Gewicht, Größe, Umbruch oder Ausrichtung.

Live-Beispiel

Primärer, fetter Text.

Dezenter Hilfetext.

Erfolgreicher Status als Text.

Kritischer Hinweis als Text.

Kleiner Zusatzhinweis.

HTML-Code anzeigen

<div class="fwt-card">
    <p class="fwt-text-primary fwt-fw-black">
        Primärer, fetter Text.
    </p>

    <p class="fwt-text-muted">
        Dezenter Hilfetext.
    </p>

    <p class="fwt-text-success">
        Erfolgreicher Status als Text.
    </p>

    <p class="fwt-text-danger fwt-fw-bold">
        Kritischer Hinweis als Text.
    </p>

    <p class="fwt-text-small fwt-text-muted">
        Kleiner Zusatzhinweis.
    </p>
</div>

Breiten

Breiten und Max-Breiten

Max-Breiten helfen, Texte und Inhalte lesbar zu halten. Nicht jeder Inhalt sollte über die volle Breite laufen.

Live-Beispiel

Begrenzte Breite

Mit Max-Breiten bleiben Texte besser lesbar. Diese Box nutzt fwt-max-md und fwt-mx-auto.

HTML-Code anzeigen

<div class="fwt-card">
    <div class="fwt-max-md fwt-mx-auto fwt-text-center">
        <h3 class="fwt-card-title">
            Begrenzte Breite
        </h3>

        <p class="fwt-card-text">
            Mit Max-Breiten bleiben Texte besser lesbar. Diese Box nutzt
            <code>fwt-max-md</code> und <code>fwt-mx-auto</code>.
        </p>
    </div>
</div>

Abstände

FWT bietet bewusst nur ausgewählte Abstandsklassen. Dadurch bleibt das System übersichtlich und wird nicht zu einer unkontrollierten Klassensammlung.

Live-Beispiel

Abstand bewusst steuern

Dieser Text hat oben einen kleinen Abstand.

Kleine Fläche mit Padding, Hintergrund und Rundung.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title fwt-mb-0">
        Abstand bewusst steuern
    </h3>

    <p class="fwt-card-text fwt-mt-2">
        Dieser Text hat oben einen kleinen Abstand.
    </p>

    <div class="fwt-mt-4 fwt-p-4 fwt-bg-primary-soft fwt-rounded-xl">
        Kleine Fläche mit Padding, Hintergrund und Rundung.
    </div>
</div>

Ränder / Schatten

Ränder, Rundungen und Schatten

Diese Helfer sind nützlich für kleine Flächen, Medienrahmen oder schnelle optische Korrekturen.

Live-Beispiel

Border + Rundung

Kleiner Schatten

Größerer Schatten

HTML-Code anzeigen

<div class="fwt-grid-3">
    <div class="fwt-p-4 fwt-border fwt-rounded-lg">
        Border + Rundung
    </div>

    <div class="fwt-p-4 fwt-border fwt-rounded-xl fwt-shadow-xs">
        Kleiner Schatten
    </div>

    <div class="fwt-p-4 fwt-border fwt-rounded-2xl fwt-shadow-md">
        Größerer Schatten
    </div>
</div>

Medien

Medien- und Aspect-Ratio-Helfer

Medien-Helfer unterstützen Bilder, Videos und feste Seitenverhältnisse.

Live-Beispiel

16:9 Medienfläche

HTML-Code anzeigen

<div class="fwt-card">
    <div class="fwt-aspect-video fwt-overflow-hidden fwt-rounded-2xl fwt-bg-primary-soft">
        <div class="fwt-place-center fwt-w-100" style="height: 100%;">
            <span class="fwt-badge fwt-badge-primary">
                16:9 Medienfläche
            </span>
        </div>
    </div>
</div>

Responsive

Responsive Helfer

Responsive Helfer sind kleine Korrekturklassen für mobile Ansichten. Sie sollten sparsam genutzt werden.

Live-Beispiel

Hauptaktion Nebenaktion Weitere Info

Auf kleineren Bildschirmen stapelt fwt-stack-md-down die Elemente untereinander.

HTML-Code anzeigen

<div class="fwt-card">
    <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 fwt-mt-3">
        Auf kleineren Bildschirmen stapelt <code>fwt-stack-md-down</code> die Elemente untereinander.
    </p>
</div>

Hinweise

Helpers richtig verwenden

Sparsam einsetzen

Wenn ein Element viele Helper braucht, sollte daraus eher eine eigene Komponente werden.

Nicht alles mit Helpers bauen

Am Ende laden

Helpers sollten nach Komponenten und Mustern geladen werden.

@import url("06-utilities/helpers.css");

Barrierefreiheit

fwt-sr-only ist wichtig für zugängliche Labels und Icon-Buttons.

<span class="fwt-sr-only">Suche</span>

Keine Klassenschlacht

FWT soll verständlich bleiben. Helpers sind Werkzeuge, kein Selbstzweck.

Komponente vor Utility-Kette

Responsive testen

Klassen wie fwt-stack-md-down müssen in echten Layouts geprüft werden.

fwt-stack-md-down

Lesbarkeit vor Optik

Textbreiten, Abstände und Kontraste müssen zur Lesbarkeit beitragen.

fwt-max-md fwt-mx-auto