Living Style Guides#

Living Style Guides sind aus CSS-Dateien generierte Styleguides.

Living-Style-Guide

Vorteile#

Konsistenz

Die generierten Styleguides stimmen exakt mit der Code-Basis überein. Testbarkeit Mit einem einheitlichen Styleguide wird sehr schnell deutlich, an welchen Stellen das Design Brüche aufweist, da die verschiedenen Komponenten einfach auf verschiedene Rasterweiten, Ausgabegeräte, Browser etc. überprüft werden können.

Verbesserte Zusammenarbeit

Ein generierter Styleguide gibt einen Überblick über das gesamte Erscheinungsbild einer Site, nicht nur einer einzelnen HTML-Seite. Damit lassen sich viel einfacher die relevanten Gestaltungsregeln angeben.

Gemeinsames Vokabular

Das gemeinsame Vokabular, das sich aus den Namen der Komponenten ergibt, verbessert die Verständigung zwischen Kunden, Designern und Web-Entwicklern.

Referenz

Eine generierter Styleguide ist auch für die Redakteure der Site hilfreich, da sie einen vollständigen Überblick über die möglichen Auszeichnungen erhalten.

Prozess#

Dont’t build pages, build a system of components!

– Fiona Chan, 28. März 2013

Wie sieht unser Design-Prozess nun im Einzelnen aus:

  1. Analyse der Website

    • Typographie

    • Links

    • Listen

    • Boxen und Hintergrund

    • Buttons

Buttons
Formulare

  1. Erstellen der Komponenten

    Hier das Beispiel des GitHub CSS Styleguide:

    styles
├── components
│   ├── comments.scss
│   └── listings.scss
├── globals
│   ├── browser_helpers.scss
│   ├── responsive_helpers.scss
│   ├── variables.scss
├── plugins
│   ├── jquery.fancybox-1.3.4.css
│   └── reset.scss
├── sections
│   ├── issues.scss
│   ├── profile.scss
└── shared
    ├── forms.scss
    └── markdown.scss

  2. Pflege

    Da die CSS-Dateien, aus denen der Styleguide generiert wird, in einem Versionsverwaltungssystem gespeichert werden, lassen sich Aktualisierungen sehr kontrolliert durchführen.

    Auch das umfassende Testen der CSS-Dateien mit neuen Ausgabegeräten und Browsern wird deutlich vereinfacht.

Siehe auch