Utility-Klassen – utils.css
Direkt verwendbare Hilfsklassen. An jeder Komponente oder jedem HTML-Element via class="..." anwendbar,
z.B. <Stack class="Width--100">. Alle Regeln haben !important.
Fonts
FontWeight--700Fetter Text (700)
FontWeight--600Halbfetter Text (600)
FontWeight--400Normaler Text (400)
FontWeight--100Dünner Text (100)
FontStyle--italicKursiver Text
TextTransform--uppercaseGroßbuchstaben
Text Alignment
TextAlign--left – Text links ausgerichtet
TextAlign--center – Text zentriert ausgerichtet
TextAlign--right – Text rechts ausgerichtet
Width
Width--100
Width--75
Width--50
Width--25
Display & Visibility
Display--none
Sichtbar Versteckt (display:none) → zweites Element nicht sichtbar
Sichtbar Versteckt (display:none) → zweites Element nicht sichtbar
Visibility--hidden
Sichtbar Unsichtbar (visibility:hidden) → Platz bleibt erhalten
Sichtbar Unsichtbar (visibility:hidden) → Platz bleibt erhalten
Display--inline-block
Block 1
Block 2
Overflow
Overflow--hidden
Langer Text der abgeschnitten wird und nicht umbricht weil overflow hidden gesetzt ist
OverflowY--scroll
Zeile 1
Zeile 2
Zeile 3
Zeile 4
Cursor
Cursor--default – defaultCursor--pointer – pointerCursor--zoom-in – zoom-inAlignSelf
Innerhalb eines Flex-Containers (z.B. Stack) die eigene Ausrichtung überschreiben.start
top
center
bottom
Misc
NoPadding / Padding--0
Kein Padding (Hintergrund direkt am Rand)
NoMargin / Margin--0Kein Margin – kein extra Außenabstand
Border--0
Border wird auf 0 gesetzt (roten Border sieht man nicht)
UserSelect--none
Dieser Text kann nicht selektiert werden
Flex--1Fix
Flex--1 (nimmt restlichen Platz)
Fix
WhiteSpace--nowrapoo-truncate
Langer Text der mit … abgeschnitten wird wenn er zu lang ist
MarginLeft--autoLinks
Rechts via MarginLeft--auto