Schnell
Keine Abhängigkeiten, keine Ladezeit durch Frameworks.
Komponenten
Jeder Baustein steht für sich und lässt sich per Copy-and-paste in eigene Seiten übernehmen.
Buttons
Badges und Hinweise
Neutral
Primär
Erfolg
Warnung
Fehler
Hinweis: Alle Inhalte hier sind Beispieldaten.
Erfolg: Die Ă„nderungen wurden gespeichert.
Achtung: Der Speicher ist zu 85 % gefĂĽllt.
Fehler: Die Verbindung ist fehlgeschlagen.
Karten
Anpassbar
Farben und Abstände liegen als CSS-Variablen zentral vor.
Zugänglich
ARIA-Attribute, Tastaturbedienung und sichtbarer Fokus.
Tabs
Tabs lassen sich mit den Pfeiltasten sowie Pos1 und Ende bedienen.
Der zweite Bereich zeigt Details. Der Inhalt bleibt im DOM und wird nur ausgeblendet.
Im dritten Bereich stĂĽnde zum Beispiel eine Ă„nderungshistorie.
Accordion
Alle Farben stehen als CSS-Variablen im
:root-Block von assets/css/styles.css.
FĂĽr den dunklen Modus gibt es direkt darunter einen zweiten Block.
Eine Datei aus
pages/ kopieren, umbenennen und den Eintrag in NAV_ITEMS
in assets/js/main.js ergänzen – Header und Footer aktualisieren sich dann überall.
Nein. Für die JSON-Beispiele auf der Datenseite ist nur ein einfacher lokaler Server nötig,
etwa
python3 -m http.server 8000.
Overlays und MenĂĽs
Fortschritt und Ladezustände
Skeleton-Loader
Typografie
Ăśberschrift 1
Ăśberschrift 2
Ăśberschrift 3
FlieĂźtext mit fetter, kursiver und verlinkter Auszeichnung,
dazu Inline-Code und eine Tastenangabe Strg + K.
Ein Zitat als Beispiel fĂĽr hervorgehobenen Text.
- Ungeordnete Liste
- Zweiter Punkt
- Geordnete Liste
- Zweiter Punkt
<button class="btn btn-primary">Klick mich</button>Timeline
- Projekt angelegt
Grundstruktur erstellt.
- Design gesetzt
Farben und Typografie definiert.
- Komponenten gebaut
Alle Bausteine dokumentiert.
- Veröffentlicht
Bereit zum Umbauen.