Veit Schiele Communications

Veit Schiele Communications

Living Style Guides

Living Style Guides dokumentieren UI-Elemente und Muster. Damit erleichtern sie die konsistente Gestaltung einer Website.
erstellt von Veit Schielezuletzt verändert: 19.03.2017 16:36 © Veit Schiele Communications GmbH, 2013–2017
Stylify Me

Sie können einfach die URL Ihrer Website angeben, dann wird der Styleguide automatisch mit allen Farben, typographischen Angaben und Bildgrößen erzeugt. Schließlich wird er auch als PDF zum Download angeboten.

Stylify Me
Fabricator

Mit Fabricator können Sie Ihr eigenes UI-Toolkit erstellen um daraus einen StyleGuide zu generieren. Dabei können Sie mit der Wiki-Syntax Markdown Ihre eigene Dokumentation schreiben.

Fabricator
Frontify

Frontify geht weit über die Generierung von StyleGuides hinaus und erlaubt auch Mockups und Wireframes wodurch der gesamte Designprozess von der Farbpalette über Schriftarten, Icons etc. optimiert wird.

Frontify
Pattern Lab

Muster Lab ist ein Baukastensystem, mit dem sich eine benutzerdefinierte statische Website generieren lässt.

Pattern Lab
Hologram

Hologram generiert Styleguides wobei auch die CSS-Kommentare analysiert werden. Darüberhinaus stellt Hologram ein Template-System mit grundlegenden Stilen und Navigation bereit.

Hologram
KSS

Knyle Style Sheets (KSS) ist entstanden aus einer Methode zum Schreiben wartbarer und dokumentierter CSS-Dateien. Es ist eine Spezifikation zur Dokumentation von CSS-Dateien und zum Generieren von Styleguides. KSS kann auch zusammen mit Präprozessoren wie Sass und Less verwendet werden. KSS macht jedoch keine Vorgabe zu Namenskonventionen o.ä.

Kurz gesagt, sieht KSS wie folgt aus:

/*
Your standard form button.

:hover    - Highlights when hovering.
:disabled - Dims the button when disabled.
.primary  - Indicates button is the primary action.
.smaller  - A smaller button

Styleguide 1.1
*/
button {
  …
}
button.primary, button.primary:hover {
  …
}
button.smaller {
  …
}
button:hover {
  …
}
button:disabled {
  …
}

Daraus lässt sich dann ein Styleguide generieren wie der folgende:

Styleguide

Das Beispiel ist entnommen aus kss/example.

EIne KSS-Dokumentation besteht aus drei Teilen:

  1. Beschreibung

    Beschreibung zur Verwendung der CSS-Regel.

    Sofern die CSS-Regel eine bestimmte HTML-Strukur erwartet, sollte diese mit angegeben werden, z.B.:

    // A feed of activity items. Within each <section.feed>, there should be many
    // <article>s which are the feed items.
    

    Um den Status von Regeln zu beschreiben, können die folgenden beiden Präfixe verwendet werden:

    • Experimental:
    • Deprecated:
  2. Klassen und Pseudoklassen

    Gibt es zu einem Element mehrere Stadien oder Stile, dann sollten diese Klassen oder Pseudoklassen einzeln aufgenommen werden, z.B.:

    :hover    - Highlights when hovering.
    :disabled - Dims the button when disabled.
    .primary  - Indicates button is the primary action.
    .smaller  - A smaller button
    
  3. Referenz

    Die Position des Elements im Styleguide, z.B. Kapitel 1.1 zugewiesen werden soll:

    Styleguide 1.1
    

    Somit lässt sich der Styleguide im mehrere nummerierte Abschnitte unterteilen. Diese Abschnitte können beliebig tief verschachtelt sein, z.B.:

    1. Buttons
       1.1 Form Buttons
           1.1.1 Generic form button
           1.1.2 Special form button
       1.2 Social buttons
       1.3 Miscelaneous buttons
    2. Form elements
       2.1 Text fields
       2.2 Radio and checkboxes
    3. Text styling
    4. Tables
       4.1 Number tables
       4.2 Diagram tables
    

    Soll es kein Beispiel im Styleguide geben, so kann dies ebenfalls explizit darauf angegeben werden:

    No styleguide reference.
    
  4. Markup

    Soll im Styleguide ein spezielles HTML-Markup verwendet werden, so kann dies in kss-node ebenfalls angegeben werden. , z.B.:

    Markup:
    <a href="#" class="button {$modifiers}">Link</a>
    <button class="button {$modifiers}">Button</button>
    

    Anmerkung: Stellen Sie sicher, dass Sie keine doppelten Zeilenumbrüche in Markup:-Anweisungen verwenden, da ansonsten nur der erste Absatz verwendet würde.

  5. Mixins, Parameter

    Wenn Sie eine CSS-Präprozessor wie SCSS oder LESS verwenden, sollten Sie auch alle Mixins dokumentieren, z.B.:

    // $start - The color hex at the top.
    // $end   - The color hex at the bottom.
    @mixin gradient($start, $end){
      …
    }
    
  6. Kompatibilität

    Sie können ein Liste der unterstützten Browser angeben, z.B.:

    // Compatible in IE6+, Firefox 2+, Safari 4+.
    

    oder eben:

    // Compatibility untested.
    
kss-node
kss-node ist eine Reimplementierung des auf Ruby basierenden KSS- Parser in Node.