Was ist ein Frontend Styleguide bzw. ein Living Styleguide?

Frontend Styleguides dokumentieren das Erscheinungsbild und das Verhalten einer Website. Im Unterschied zu einem konventionellen Styleguide (Print Styleguide) dokumentiert der Frontend Styleguide die einzelnen Komponenten einer Website mit Live-Vorschau und Code-Beispielen. Designer und Entwickler können die einzelnen Bestandteile sowohl visuell als auch technisch nachschlagen. Abweichungen zwischen verschiedenen Browsern sind ebenso berücksichtigt wie Responsive Design und Barrierefreiheit. Die Grenze zu einem sog. Design System ist fließend.

Der sog. Living Styleguide sorgt dafür, dass die Dokumentation immer exakt der Live-Website entspricht. Technisch gelöst wird dies, indem sich der Living Styleguide aus dem Code der Live-Website generiert.

Ausschnitt aus einem Frontend-Styleguide: Titel und Beschreibung der Komponente, Live-Vorschau und Code-Ansicht

Beispiele für Frontend-Styleguides

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.