Layout
Kurzbeschreibung
Im Bereich Layout findest Du die Dokumentation zu Raster- und Layout-Hilfsklassen (Utilities) im KERN Design-System.
- Grid System: Das Layout nutzt ein 12er-Grid-System auf Bootstrap-Basis, wobei die Zeilen(
row) als Flexbox-Wrapper fungieren. - Hilfsklassen (Utilities): Diese Hilfsklassen ermöglichen eine schnelle Konfiguration von CSS-Flexbox- und Grid-Layouts sowie die Steuerung von Abständen, Stapelung und Sichtbarkeit.
Was verwende ich wann?
Empfehlung
Für neue Projekte und die aktive Weiterentwicklung von Layouts ist CSS-Grid die bevorzugte Wahl. Es bietet eine präzisere 2D-Steuerung und einen moderneren Code-Standard.
CSS Grid Hilfsklassen (2D)
Für das globale Seitenlayout und komplexe, zweidimensionale Strukturen.
- Einsatz: Seitenlayouts mit Header, Sidebar, Main und Footer sowie Kachel-Gitter mit variablen Höhen/Breiten
- Ansatz: Layout-first – Du definierst das Raster, der Inhalt ordnet sich unter
- Vorteil: Volle Kontrolle über Zeilen und Spalten gleichzeitig
Grid System / Bootstrap-Stil (1D)
Für standardisierte, responsive Spalten-Layouts.
- Einsatz: Typische Inhaltsbereiche (z. B. „3-Spalter“), die auf Mobile umbrechen
- Ansatz: Row-first – Denken in horizontalen Zeilen, die in (meist 12) Spalten unterteilt sind
- Vorteil: Schnelle Umsetzung gewohnter Web-Strukturen mit hoher Vorhersehbarkeit
CSS-Flex Hilfsklassen (1D)
Für Feinausrichtung innerhalb von Komponenten.
- Einsatz: Icons zentrieren, Navigationslinks verteilen, Buttons in Cards ausrichten
- Ansatz: Content-first – Die Größe des Inhalts bestimmt die Verteilung
- Vorteil: Punktuelle Kontrolle (z. B.
kern-justify-content-between) ohne festes Spaltensystem
Quick-Check: Was nehme ich wann?
| Anwendungsfall | Tool | Dimension |
|---|---|---|
| Gesamtlayout der Seite | CSS-Grid Hilfsklassen | 2D |
| Responsive Spalten (z. B. 1/3 zu 2/3) | Grid System | 1D |
| Elemente ausrichten (Zentrieren, Abstände) | CSS-Flex Hilfsklassen | 1D |
Goldene Regel für KERN-UX: Nutze Grid für die äußere Hülle, das Flex Grid für den Inhaltsfluss und Flex-Hilfsklassen für die Details in den Komponenten.