chrisinterface UI-Kit

Die Idee

Gute Oberflächen brauchen zweierlei: gestalterische Sorgfalt bis ins Detail und eine Technik, die diese Sorgfalt über viele Anwendungen hinweg trägt. Ich habe das UI-Kit entwickelt, um beides zu verbinden. Farben, Abstände, Typografie und Verhalten sind einmal entschieden und liegen in einer Quelle; jede Anwendung erhält daraus eine geprüfte Kopie.

Ein neues Frontend steht damit in kurzer Zeit. Kopfzeile, Tabellen, Formulare, Dialoge, Meldungen, Anmeldung und Druck sind fertig, hell und dunkel inklusive. Die Arbeit beginnt bei der Aufgabe der Anwendung, nicht beim Knopf.

Gemeinsam besser

In einer Produktlinie kommt jede Verbesserung allen Anwendungen zugute, egal wo sie entsteht.

1. Entdecken. Eine Anwendung zeigt, was besser gehen kann: ein Kontrast, ein Abstand, ein Verhalten.
2. Verbessern. Die Korrektur fließt in die Quelle des Kits. Wurde eine Kopie direkt in einer Anwendung geändert, meldet der Sync die Abweichung, damit nichts verloren geht.
3. Verteilen. Ein Befehl bringt den neuen Stand in jede Anwendung. Vorher prüft der Sync die Quellen und bricht bei einem Fehler ab, statt ihn überallhin zu tragen.
4. Weiterbauen. Alle Anwendungen stehen auf demselben Stand, und die nächste beginnt dort.

Autark und zeitlos

Das Kit braucht weder React noch ein anderes Framework, keinen Paketmanager und keinen Build-Schritt. Es besteht aus dem, was jeder Browser versteht: HTML, CSS und JavaScript.

Jede Anwendung trägt ihre Kopien selbst und läuft ohne Verbindung zum Kit, die Beispielanwendung sogar per Doppelklick ohne Server. Es gibt kein Framework, das veraltet, und keine Abhängigkeit, die ein Update erzwingt; nur Diagramme nutzen Apache ECharts. Das hält die Anwendungen stabil und das Kit leicht: Ordner kopieren, Bausteine in eine Liste eintragen, ein Befehl.

In Zahlen

• 36Bausteine in CSS und JavaScript
• 71Tokens
• 2Welten: hell und dunkel
• 4Sprachen
• 0Frameworks
• 86 KBdas ganze Kit, komprimiert

Das Besondere in der Technik

• Hell und dunkel aus einem Token-Satz. Die Bausteine kennen nur Rollen wie Text, Fläche und Linie; die dunkle Welt belegt dieselben Rollen mit anderen Werten. modus.js entscheidet im Kopf der Seite, bevor etwas gezeichnet wird – so blitzt nichts hell auf.
• Der Sync als Wächter. Ein Python-Skript ohne Fremdpakete verteilt nur, was eine Anwendung abonniert hat, und meldet jede Abweichung zwischen Kopie und Quelle. Vor jedem Commit zeigt es, ob alle Anwendungen auf dem Stand sind.
• Fehler bleiben im Kit. Eine offene Klammer, eine Farbe ohne dunklen Wert, ein Baustein, den es nicht gibt: Der Sync bricht ab, bevor etwas verteilt wird.
• Proben mit eingebauten Fallen. Automatische Proben testen Bausteine und Beispielanwendung in einem simulierten Browser. Zur Gegenprobe lassen sich Fehler absichtlich einbauen; die Proben müssen sie finden.
• Jede Datei erklärt sich selbst. Der Kopf nennt Zweck, Einbindung und Optionen, jede Regel ihre Begründung. Wer das Kit ändert, muss keine Entscheidung rekonstruieren.
• Druck inklusive. Cmd+P ergibt ein sauberes Blatt mit Tabellenkopf auf jeder Seite, auch aus der dunklen Ansicht.

Galerie

Alle Bausteine live, umschaltbar zwischen hell, dunkel und System, auf Deutsch und Englisch. Die Galerie ist aus dem Kit selbst gebaut und zeigt genau den Stand, den der Sync verteilt.

Galerie öffnen →

Ausgaben

• 2.1.0 · 13.09.2026 · Druck-Baustein
• 2.0.0 · 01.02.2026 · Erste Ausgabe