Installation

Einfach einbinden:

<link rel="stylesheet" href="style/main.css">

Layout Komponenten

.container

Haupt-Wrapper mit max-width.

.grid

Semantisches Layout: Mobile stacked, Desktop 3:1 Main:Aside

.flex

Responsive Flex-Container für Komponenten.

Spalte 1
Spalte 2
Spalte 3

.stack

Vertikale Anordnung mit Gap.

.cluster

Horizontale Anordnung mit Wrap.

Komponenten

Buttons

Cards

Card Bild

Mit Bild

Automatisch erkannt via :has(img)

Mit Footer

Erkannt via :has(footer)

Meta Info

Modal

Modal Dialog

Native <dialog> Element

Accordion

Sektion 1
Native <details> Element
Sektion 2
Kein JavaScript nötig!

Spinner

Default
Large
Dot

Off-Canvas Sidebar

Klick auf den Pfeil (◀/▶) oben rechts!

Utilities

Nur 25 Essential Klassen:

  • Text: .text-center, .text-small, .text-muted, .text-primary
  • Spacing: .mb-0, .mb-2, .mb-3, .mb-4, .p-3, .p-4, .mx-auto
  • Display: .hidden, .block, .flex, .grid
  • A11y: .sr-only

Design Tokens

Primary
Success
Danger
Info