ProdukteProdukteWebBlocksWebBlocks UIWebBlocks CMSQuizTemDoDoneHerne PanelWebBlocks PlayLeistungenBlogsKontakt
WebBlocks UI HTML-first readable system
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
WebBlocks UI shared product foundations
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.

Folge 01 · Was ist WebBlocks CMS?

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 02 · Die erste Seite erstellen und veröffentlichen

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 04 · Layout, Slot und Block erklärt

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 05 · Eine Startseite mit Hero und Rich Text erstellen

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 06 · Bilder über die Mediathek hinzufügen

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 07 · Navigation und gemeinsamen Kopfbereich erstellen

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 08 · Entwurf, Prüfung, Veröffentlichung und Versionen

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 09 · Mehrere Websites in einer Installation verwalten

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen

Folge 10 · Entwicklereinrichtung und Laravel-Integration

Videosprache: Englisch.

Dieser Inhalt wird von YouTube bereitgestellt. Erlauben Sie das Laden, um ihn anzuzeigen.

Cookie-Einstellungen
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.

Zur Website von WebBlocks UI →
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.

Current WebBlocks UI documentation rendered with package assets
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.