Seiten
Inhalt
4. Layout & Grid
Das Layout-System von @xpulse/theme basiert auf CSS Custom Properties und einfachen Utility-Klassen.
Wichtige Layout-Tokens
| Token | Beschreibung | Standardwert |
|---|---|---|
--xpulse-content-width |
Maximale Breite des Hauptinhalts | 1100px |
--xpulse-sidebar-width |
Breite von Sidebars und Navigation | 260px |
--xpulse-gap-layout |
Standard-Abstand zwischen Elementen | 24px |
Grundstruktur
Die meisten xPulse-Seiten verwenden ein zentriertes Layout:
| .xpulse-shell { |
| width: min(var(--xpulse-content-width), calc(100% - 32px)); |
| margin: 32px auto; |
| } |
Responsive Verhalten
Bei Bildschirmbreiten unter 720px wechseln viele Layouts automatisch in eine einspaltige Ansicht (z. B. TOC + Content).
Grid & Flex Utilities
.xpulse-grid– CSS Grid mit auto-fit.xpulse-stack– Vertikaler Flex-Stack mit Gap.xpulse-row– Horizontaler Flex-Row mit Gap
Beispiel:
| <div class="xpulse-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));"> |
| <!-- Karten --> |
| </div> |