SZ CSS Framework
Eine interaktive Übersicht der verfügbaren UI-Komponenten aus sz.css und szui.js.
Buttons
Badges & Notifications
Primary
Success
Warning
Danger
Info
Neutral
Notification Shapes
1
Nachricht
Neu
Angebot
!
Wichtig
Alerts & Flash Messages
Das ist eine Info-Meldung.
Aktion erfolgreich ausgeführt!
Achtung, hier liegt ein Problem vor.
Fehler beim Speichern der Daten.
Progress Bars
Charts
75%
42%
89%
Formulare
Passwort zu unsicher!
Dropdown
Klicke auf den Button, um das Menü zu öffnen.
Tabs
Inhalt für den ersten Tab. Perfekt für Code-Snippets!
Inhalt für Tab 2. Sehr spannend!
Accordion
Das ist der versteckte Inhalt des Accordions. Gesteuert durch Vanilla JS.
Hier stehen spannende Features des CSS-Frameworks. Pures CSS für das Layout, minimales Vanilla JS für die Interaktion.
Ganz einfach die Dateien einbinden und loslegen. Keine schweren Abhängigkeiten oder jQuery nötig!
Funktioniert in allen modernen Browsern dank flexibler CSS-Variablen und Grid-Layouts.
Ein schlankes, extrem schnelles Setup für dein nächstes Webprojekt.
Modals & Tooltips
Treeview
-
Ordnerstruktur
- datei_1.txt
- datei_2.txt
- readme.md
Flipbox (3D Hover)
Horizontal
Standard Hover
Rückseite
Dreht sich auf der Y-Achse.
Vertikal
Klasse .flip-box--vertical
Rückseite
Dreht sich auf der X-Achse.
Timeline
1
April 2026
Framework Start
Das CSS-Framework wurde initialisiert.
2
Mai 2026
Erster Release
Alle UI-Komponenten sind bereit.
Tabellen
| ID | Name | Status | Aktion |
|---|---|---|---|
| 1 | Max Mustermann | Aktiv | |
| 2 | Erika Musterfrau | Wartend |
Parallax Utility
Parallax Effekt
Klasse .parallax macht den Hintergrund beim Scrollen fixiert.
Slideshow / Carousel