Utilities / Abstände
Abstände in FWT
Gute Abstände machen eine Oberfläche verständlicher. Sie trennen Inhalte, geben Texten Luft und verhindern, dass Webseiten zusammengequetscht wirken.
FWT bietet dafür kurze Klassen wie fwt-p-4, aber auch
verständlichere Langformen wie fwt-padding-4.
Skala
Die FWT-Abstandsskala
FWT nutzt nicht nur fünf starre Stufen. Die Skala enthält kleine, mittlere und große Werte, damit sowohl kompakte UI-Elemente als auch größere Seitenbereiche sauber aufgebaut werden können.
0
--fwt-space-0
Kein Abstand
1
--fwt-space-1
0.25rem
2
--fwt-space-2
0.5rem
3
--fwt-space-3
0.75rem
4
--fwt-space-4
1rem · Standard
5
--fwt-space-5
1.25rem
6
--fwt-space-6
1.5rem
8
--fwt-space-8
2rem
10
--fwt-space-10
2.5rem
12
--fwt-space-12
3rem
16
--fwt-space-16
4rem
20
--fwt-space-20
5rem
24
--fwt-space-24
6rem
Orientierung
0 = kein Abstand
1–3 = feine UI-Abstände
4–6 = Standardabstände
8–12= größere Boxen
16–24 = Layout / Sections
8 sind bewusst vorhanden.
Sie eignen sich besser für Layoutbereiche und große Abstände.
Padding
Innenabstand auf allen Seiten
Padding setzt Innenabstand innerhalb eines Elements. Das ist besonders wichtig für Boxen, Rahmen, Hinweise und einfache Inhaltsbereiche.
Kleiner Innenabstand
Für kompakte Hinweise, kleine Labels oder enge Bereiche.
<div class="fwt-border fwt-border-primary fwt-p-2">fwt-p-2</div>
Standard-Innenabstand
Guter Standardwert für Boxen, Hinweise und einfache Inhaltsbereiche.
<div class="fwt-border fwt-border-primary fwt-p-4">fwt-p-4</div>
Großer Innenabstand
Für ruhigere Flächen, größere Boxen oder Abschnittsbereiche.
<div class="fwt-border fwt-border-primary fwt-p-8">fwt-p-8</div>
Achsen
Padding links/rechts oder oben/unten
Manchmal soll ein Element nicht überall denselben Innenabstand haben. Dafür gibt es Achsenklassen.
fwt-px-*
Setzt Padding links und rechts.
<div class="fwt-px-4">Links und rechts</div>
fwt-py-*
Setzt Padding oben und unten.
<div class="fwt-py-4">Oben und unten</div>
Links und rechts
Mehr Platz links und rechts, aber weniger oben und unten.
<div class="fwt-border fwt-border-info fwt-px-6 fwt-py-2">fwt-px-6 fwt-py-2</div>
Oben und unten
Mehr Luft oben und unten, zum Beispiel für Abschnittsflächen.
<div class="fwt-border fwt-border-info fwt-px-2 fwt-py-6">fwt-px-2 fwt-py-6</div>
Richtungen
Padding für einzelne Seiten
Für gezielte Anpassungen gibt es kurze und ausgeschriebene Klassen.
fwt-pl-6
fwt-padding-left-6
Nur links
Hilfreich, wenn ein Bereich links mehr Abstand braucht.
<div class="fwt-border fwt-border-warning fwt-pl-6 fwt-py-3 fwt-pr-3">fwt-pl-6</div>
Nur oben
Gut, wenn ein Element oben mehr Luft bekommen soll.
<div class="fwt-border fwt-border-warning fwt-pt-6 fwt-px-3 fwt-pb-3">fwt-pt-6</div>
p = padding
px = padding links und rechts
py = padding oben und unten
pt = padding-top
pr = padding-right
pb = padding-bottom
pl = padding-leftMargin
Außenabstand auf allen Seiten
Margin setzt Abstand außerhalb eines Elements. Damit werden Elemente voneinander getrennt, ohne den Innenraum des Elements zu verändern.
Kleiner Außenabstand
Für kleine Abstände rund um ein Element.
<div class="fwt-frame fwt-m-2">fwt-m-2</div>
Standard-Außenabstand
Guter Standardwert, wenn ein Element rundherum Luft braucht.
<div class="fwt-frame fwt-m-4">fwt-m-4</div>
Großer Außenabstand
Für deutliche Trennung zwischen größeren Bereichen.
<div class="fwt-frame fwt-m-8">fwt-m-8</div>
Margin-Achsen
Margin links/rechts oder oben/unten
Genau wie bei Padding gibt es auch bei Margin Achsenklassen. Damit lassen sich Außenabstände horizontal oder vertikal setzen.
fwt-mx-*
Setzt Margin links und rechts.
<div class="fwt-mx-4">Links und rechts</div>
fwt-my-*
Setzt Margin oben und unten.
<div class="fwt-my-4">Oben und unten</div>
fwt-mx-auto
Zentriert ein Element horizontal, wenn es eine feste oder begrenzte Breite hat.
<div class="fwt-mx-auto">Zentriert</div>
Links und rechts
Setzt Außenabstand links und rechts.
<div class="fwt-frame fwt-mx-6">fwt-mx-6</div>
Oben und unten
Setzt Außenabstand oben und unten.
<div class="fwt-frame fwt-my-6">fwt-my-6</div>
Horizontal zentrieren
Zentriert ein Element horizontal, wenn es eine begrenzte Breite hat.
<div class="fwt-frame fwt-mx-auto" style="max-width: 18rem;">fwt-mx-auto</div>
Margin-Richtungen
Margin für einzelne Seiten
Für gezielte Außenabstände gibt es kurze und ausgeschriebene Klassen. Die Zahl entspricht immer einem Wert aus der FWT-Abstandsskala.
fwt-mt-6
fwt-margin-top-6
Nur oben
Gibt einem Element Abstand nach oben.
<div class="fwt-frame fwt-mt-6">fwt-mt-6</div>
Nur rechts
Gibt einem Element Abstand nach rechts.
<div class="fwt-frame fwt-mr-6">fwt-mr-6</div>
Nur unten
Gibt einem Element Abstand nach unten.
<div class="fwt-frame fwt-mb-6">fwt-mb-6</div>
Nur links
Gibt einem Element Abstand nach links.
<div class="fwt-frame fwt-ml-6">fwt-ml-6</div>
m = margin
mx = margin links und rechts
my = margin oben und unten
mt = margin-top
mr = margin-right
mb = margin-bottom
ml = margin-leftKomfortklasse
fwt-frame für einfache Textrahmen
Ein Rahmen allein ist oft zu nackt. Für einfache Textrahmen gibt es
deshalb fwt-frame. Diese Klasse kombiniert Rahmen,
Padding, Rundung und eine ruhige Fläche.
Normaler Textrahmen
Für einfache Hinweise, Textboxen oder kleine Inhaltsbereiche.
<div class="fwt-frame">Ein einfacher Textrahmen mit Padding, Rahmen und Rundung.</div>
Warnrahmen
Einfacher als Rahmen, Padding und Rundung einzeln zu kombinieren.
<div class="fwt-frame fwt-border-warning">Hinweis mit sichtbarem Warnrahmen.</div>
Großer weicher Rahmen
Für größere erklärende Hinweise oder ruhige Infobereiche.
<div class="fwt-frame fwt-frame-lg fwt-frame-soft fwt-border-info">Großer, ruhiger Hinweisbereich.</div>
fwt-frame oft besser als viele Einzelklassen.
Wer genauer arbeiten will, kombiniert fwt-border,
fwt-p-4 und fwt-rounded-lg selbst.