Markup beschreibt Struktur, nicht Optik. Statt
class="row row-cols-3 g-3" einfach:
<div grid cols="3"> <article card>…</article> <article card>…</article> <article card>…</article> </div>
Ein Design-System über Bootstrap 5: Layout und Komponenten werden über Attribute gesteuert, nicht über Klassenlisten. Themes ändern Variablen und importieren dieselbe Basis. Oben rechts umschalten und schauen, was passiert.
Markup beschreibt Struktur, nicht Optik. Statt
class="row row-cols-3 g-3" einfach:
<div grid cols="3"> <article card>…</article> <article card>…</article> <article card>…</article> </div>
Ein Theme setzt Variablen und importiert dann die Basis —
Bootstrap-!default-Mechanik, nichts Eigenes:
// theme-red.scss $primary: #a5180b; $border-radius: 0; @import "site";
Darunter liegt unverändertes Bootstrap 5: Variablen, Dark Mode
(data-bs-theme), Utilities und Komponenten bleiben
voll nutzbar — die semantische Schicht liegt nur darüber.
Jede Seite zeigt einen Teil des Systems im Einsatz — mit echten Inhalten, nicht mit Lorem ipsum.
Marketing-Layout: Hero, Feature-Grid, Zapp-Section, Kennzahlen, CTA.
Anwendungs-Layout: KPI-Cards, Fluffy-Tabelle, Bento-Boxen, Pipeline.
Seitenaufbau: Breakout-Grid, narrow/wide/alt/hero/zapp, randlose Kinder.
Ein echter Wiki-Artikel in [prose] — Headings, Listen, Zitate, Code.
Label umschließt Control, Grid-Fieldsets, horizontale Variante, Fehlerzustand.
Fluffy (Abstandslinien, Gruppen-Kopf) und Pivot (gedrehte Köpfe, Kacheln).
Stammblatt-Grid: cols, span, break — responsive, ohne Füllelemente.
Steps-Pipeline, Cards & KPIs, Buttons, Bootstrap-Interop.