Veit Schiele Communications

Veit Schiele Communications
StartseiteBlogLiving Style Guides

Living Style Guides

Living Style Guides sind aus CSS-Dateien generierte Styleguides.
erstellt von Veit Schielezuletzt verändert: 02.04.2013 08:47 © Veit Schiele, 2013
Living Style Guides

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

    Formulare

  2. 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
    
  3. 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.