Eine Website über WebBlocks UI - gebaut mit reinem WebBlocks UI

Diese Demo erklärt das Projekt, das Layer-Modell, die ausgelieferten Primitives, Patterns und das JavaScript-Verhalten - ausschließlich mit Paket-Assets und ausgelieferten wb-*-Klassen.

Nur Paket-Assets Kein eigenes CSS Kein eigenes JS

Was diese Seite belegt

WebBlocks UI kann sich selbst dokumentieren, ohne eine separate Präsentationsschicht. Dieser Guide ergänzt weder Hilfs-CSS noch Utility-Skripte oder erfundene Klassen.

Was das Paket mitbringt

Architektur-Schichten

6

Foundation, utilities, layout, primitives, patterns, icons

Abhängigkeiten

0

Das Paket selbst setzt kein Framework voraus

JavaScript

14+

Module für Theme, Overlays, Navigation, Feedback und Disclosure

Icons

173

Klassenbasierte Icon-Nutzung über mask-image

Das System in der richtigen Reihenfolge lesen

Erste Schritte Einbindung, Root-Attribute, erster Workflow

Beginne mit dieser Seite, wenn du den kürzesten korrekten Setup-Weg für ein echtes Projekt brauchst.

Architektur Das Sechs-Schichten-Modell

Nutze diese Seite, wenn du verstehen musst, wo Tokens, Layout, Primitives, Patterns und Icons hingehören.

Foundation Tokens, Überschriften, Theme-Achsen

Nutze diese Seite für Theme-Attribute am Root-Element, Dark Mode, Presets, Typografie-Standards, Spacing-Tokens und das Styling roher Elemente.

Layout Container, Grids, Shells

Nutze diese Seite für wb-container, wb-grid, wb-row, Navbar, Sidebar und die Struktur von Page-Shells.

Primitives Ausgelieferte Bausteine

Nutze diese Seite, um die tatsächlich ausgelieferten Controls, Surfaces, Formulare und Interaction Shells zu prüfen.

Icons Klassenreferenz für mask-image

Nutze diese Seite, wenn du die ausgelieferten Icon-Klassennamen, das Alias-Verhalten und den klassenbasierten <i>-Weg brauchst.

Patterns Kompositionen auf Screen-Ebene

Nutze diese Seite, wenn es um Seitentyp, Hierarchie oder Komposition geht statt um ein einzelnes Primitive.

Playground Live-Vorschau nur mit HTML

Nutze dieses Werkzeug, um einfaches HTML einzufügen, es mit den echten WebBlocks-UI-Assets zu rendern und KI-generierte oder handgeschriebene Snippets schnell zu prüfen.

Utilities Helfer für Abstand, Text und Ausrichtung

Nutze diese Seite für Abstandshelfer, Textgrößen, Farb-Utilities, Sichtbarkeitshelfer und letzte Anpassungen an der Komposition.

JavaScript Daten-Hooks und öffentliche APIs

Nutze diese Seite, wenn das Interaktionsmodell zählt und du das richtige Trigger-Pattern oder den öffentlichen Modulnamen brauchst.

Von einem echten, ausgelieferten Beispiel ausgehen

Wenn die Aufgabe der Seite bereits klar ist, ist das Kopieren des nächstliegenden Pattern-Beispiels aus diesem Guide sicherer, als den Screen aus dem Gedächtnis neu zu bauen. Beginne mit der gesamten Struktur, ersetze den Inhalt und kürze dann konsequent.

Admin-Dashboard Sidebar, Topbar, Stats, Tabellen

Nutze dies, wenn die Seite anwendungslastig ist und Navigation, Kennzahlen, Zeilenaktionen und schnell erfassbare Daten braucht.

Admin-Einstellungen Längere Formulare und abschnittsweise Aktionen

Nutze dies, wenn die Seite von gruppierten Einstellungen, destruktiven Aktionen und langsameren Formular-Workflows bestimmt wird.

Auth-Login Fokussierter Einstiegs-Flow

Nutze dies, wenn der Screen schmal, ruhig und auf eine einzige Formularaufgabe zentriert bleiben soll.

Öffentliche Startseite Hero-Rhythmus und Promo-Flächen

Nutze dies, wenn die Seite marketinggetrieben ist und einen ruhigeren Inhaltsfluss statt Admin-Dichte braucht.

Content Shell Doku, Onboarding und textzentrierte Abläufe

Nutze dies, wenn die Seite Struktur, Referenzen und lesbaren Fortschritt braucht statt Produkt-Chrome.