WebBlocks UI

HTML-first Oberflächen, die Menschen und KI lesen können

Ein quelloffenes UI-System aus expliziten Patterns, Design-Tokens und Komponentenverträgen, ohne eine Framework-Laufzeit als Voraussetzung.

Über WebBlocks UI sprechen

fklavye.net · web services

Ein Produkt, gemeinsame Grundlagen

WebBlocks UI entsteht mit wiederverwendbaren Oberflächen-, Publishing- und Betriebsmustern in einer zusammenhängenden Produktfamilie.

WebBlocks UI interface to daily operation

Produkt in der Praxis

Von der Oberfläche zum täglichen Betrieb

Eine fokussierte Produktoberfläche übersetzt klare Entscheidungen in verständliche, wartbare und entwicklungsfähige Software.

Ansehen: Warum WebBlocks UI? (Episode 01)

Ein 74-sekündiger Rundgang durch das Sechs-Schichten-Modell, Live-Demos mit wb-* und tatsächlich ausgelieferte Patterns. Die vollständige WebBlocks-CMS-Serie mit 9 Videos ist jetzt auf YouTube verfügbar.

CMS-Playlist mit 9 Videos auf YouTube ansehen

Kernfunktionen

Eine praktische UI-Grundlage mit expliziten Regeln

WebBlocks UI hält Oberflächenstruktur, visuelle Entscheidungen und Komponentenverhalten im Quelltext verständlich.

HTML-first Patterns

Patterns beginnen mit semantischem HTML, das ohne Rekonstruktion eines verborgenen Komponentenbaums geprüft, kopiert und angepasst werden kann.

Design-Tokens

Explizite Tokens koordinieren Farbe, Abstände, Typografie, Oberflächen und Interaktionszustände in Produktoberflächen.

Komponentenverträge

Komponenten bieten klare Struktur und erwartetes Verhalten, damit Entwicklung und Operator-Werkzeuge sie konsistent einsetzen können.

Keine verpflichtende Framework-Laufzeit

Grundlegende UI-Patterns setzen weder eine Anwendungs-Framework-Laufzeit noch eine npm-Build-Kette als Standardbedingung voraus.

Technischer Ansatz

Quelloffene UI als Produktdisziplin

Das System bevorzugt native Webgrundlagen, Progressive Enhancement und Dokumentation nahe an den beschriebenen Patterns.

Native Webgrundlagen

Die Browserplattform bildet die Basis, während Utilities und Komponenten ein konsistentes Produktvokabular ergänzen.

Progressive Enhancement

Interaktives Verhalten wird auf nutzbares Markup geschichtet, statt Voraussetzung für das Verständnis der Oberfläche zu sein.

KI-lesbare Verträge

Quelloffene Struktur und explizite Konventionen erleichtern KI-Agenten und Operator-Werkzeugen die sichere Prüfung und Änderung von Oberflächen.

Echte Produktoberfläche

Ein UI-System, das sich selbst dokumentiert

Die aktuelle WebBlocks-UI-Dokumentation, vollständig mit ausgelieferten Paket-Assets, Primitives, Patterns und integrierten JavaScript-Hooks dargestellt.

Aktuelle WebBlocks-UI-Dokumentation mit Navigation für Foundation, Layout, Primitives, Icons, Patterns, Utilities, JavaScript und Playground. — Startseite der WebBlocks-UI-Dokumentation mit dem paketbasierten Pattern-System.

Aktueller Stand

In aktiver Produktentwicklung

WebBlocks UI ist ein aktives Produkt. Die Dokumentationsoberfläche oben wird vom aktuellen Paket selbst dargestellt; öffentliche Patterns und Beispiele wachsen mit stabilen Releases weiter.

Mehr über WebBlocks UI erfahren

Klare Betriebsgrenze

Anforderungen und Auslieferungsstatus

Was das aktuelle Paket benötigt, was optional bleibt und wie der Zugang heute gehandhabt wird.

HTML-first, keine Framework-Laufzeit

Verwendet werden Standard-HTML und das ausgelieferte CSS. Icons und Interaktionsruntime sind optional; Node, npm oder ein Framework sind für die Nutzung nicht erforderlich.

Ausgelieferte Version fest pinnen

Anwendungen sollten eine bewusste Paket- oder CDN-Version nutzen; produktspezifische Inhalte und Marken bleiben im Host-Projekt.

Dokumentationsbasierte Einführung

Dokumentation und Playground sind die quelloffenen Einstiegsoberflächen. Für Integration und Produktfragen steht fklavye.net bereit.