Gestaltest du noch auf gut Glück oder lebt dein Styleguide schon?
Kennst du das nicht auch? Du oder dein Team bauen eine Website und nach und nach werden umgesetzte Teile mit Hilfe von Templates und CSS gestaltet. Die CSS-Dateien (oder im besten Fall verwendest du einen CSS-Preprocessor wie z.B. SASS) werden immer größer, komplexer und unübersichtlicher - ganz zu schweigen von der Wartbarkeit und der eventuellen Fehleranfälligkeit dieser Anweisungen. Hier lässt sich natürlich durch die Einhaltung bestimmter Vorgaben (wie z.B. der Verwendung des SMACSS-Standards) ein wenig Abhilfe schaffen, doch irgendwann wird ein Punkt erreicht, wo es schwer fällt, einen allgemeinen Überblick zu behalten - insbesondere wenn ein Team mit mehreren Entwicklern an der Gestaltung der Website arbeitet.
Jetzt spätestens wäre es Zeit für einen Styleguide, der einen Überblick aller gestalteten Komponenten der Website bereitstellt... Doch woher jetzt noch die Zeit nehmen, um diesen zu erstellen? Und wer überwacht, dass auch im weiteren Zuge der Entwicklung alle neuen Komponenten darin aufgenommen werden? Es gibt eine Lösung für dieses Problem - den Living Styleguide!
Auf der DrupalCon Amsterdam 2014 gab es eine sehr interessante Session von John Albin Wilkins zu diesem Thema. Neben einer Erläuterung agiler Entwicklungsprozesse wurde hier ausgiebig erklärt, wie Team-Mitglieder während des eigentlichen Entwicklungsprozesses mit Hilfe des Knyle Style Sheets (KSS) Tools bzw. dessen Node.js Implementierung kss-node automatisiert einen Styleguide aufbauen können. In diesem kann dann jede einzelne Komponente isoliert betrachtet und geprüft werden - und das sogar komplett außerhalb des Kontextes der Website.
Klingt alles kompliziert, ist es aber gar nicht!
kks-node kann mit Hilfe von Node Packaged Modules durch einen Einzeiler über die Kommandozeile installiert werden ($ npm install -g kss). Nun muss nur noch einestyleguide.mdDatei im Quellordner der Style-Dateien (z.B. CSS-, SASS- oder LESS-Dateien) abgelegt werden, die als Einstiegsseite des Styleguides verwendet wird und je nach Belieben mit allgemeinen Informationen zum Projekt befüllt werden kann.
Mit folgendem Kommandozeilenbefehl kann dann der Styleguide generiert werden:
$ kss-node "pfad/zum/styles-ordner" "zielpfad/fuer/die/styleguide-dateien"
Eine vollständige Referenz des$ kss-nodeBefehls findest du auf der kss-node Projektseite.
Im von dir angegeben Styleguide-Zielordner findest du jetzt deinen fertig generierten Styleguide. Aber nanu... bis auf die Einstiegsseite, die durch diestyleguide.mdDatei erzeugt wurde, ist der Styleguide ja bisher leer?!
Dies liegt daran, dass dem Parser bisher noch keine wirklichen Daten bereitgestellt wurden. Doch auch dies ist im Handumdrehen erledigt: Mit Hilfe einfacher Notationen in den Kommentaren der Style-Dateien können dem Parser Informationen zum erwarteten Markup und den zugehörigen Styles übergeben werden. Es ist sogar möglich, Modifier für unterschiedliche Zustände einer Komponente (z.B.:hover- und:active-Zustand eines Buttons) bereitzustellen. Hier ein einfaches SASS-Beispiel:
_buttons.scss
// Buttons
//
// Hier könnte dein beschreibender Text zum Thema "Buttons" stehen
//
// Styleguide 1
// Allgemeine Styles
//
// Hier könnte noch mehr beschreibender Text stehen...
//
// :hover - Zustand: Hovered
// :active - Zustand: Active
// .btn-medium - Größe: Mittel
// .btn-large - Größe: Groß
//
// Markup:
// <!-- Standard-Button: -->
// <button type="submit" class="btn {$modifiers}">
// Beschriftung
// </button>
// <!-- Link-Button: -->
// <a href="#" class="btn {$modifiers}">
// Beschriftung
// </a>
//
// Styleguide 1.1
.btn {
background: #83B81B;
border: 2px solid #83B81B;
color: #fff;
font-family: sans-serif;
font-size: 0.75em;
padding: 1em;
text-decoration: none;
&:hover {
background: #fff;
color: #83B81B;
}
&:active {
background: #fff;
border-color: #000;
color: #000;
}
&.btn-medium {
font-size: 1.25em;
}
&.btn-large {
font-size: 2em;
}
}
Eine vollständige Referenz der Notationen findest du auf der KSS Projektseite.
Et voilá: Nachdem der oberhalb erklärte$ kss-nodeBefehl erneut ausgeführt wurde, beinhaltet der Styleguide jetzt einen neuen Bereich Buttons, der Previews für alle mit Hilfe der Modifier festgelegten Varianten der Button-Komponente bereitstellt.
Weitere Styleguide-Beispiele
Doch das ist noch lange nicht alles...
- Da Markdown unterstützt wird, können die zu verarbeitetenden Notationen jegliche Markdown-Syntax enthalten
- Mit
$ kss-node --init "dein-template"kannst du ein benutzerdefiniertes Styleguide-Template initialisieren und manuell deinen Vorstellungen entsprechend anpassen. Beim Ausführen von$ kss-nodemuss dann nur die--template "dein-template"Option angehängt werden, um das Template für die Styleguide-Erzeugung zu verwenden - Die Erzeugung/Aktualisierung des Styleguides kann durch einen Task-Manager wie z.B. Gulp automatisiert werden
- ... Everything else is up to you!
Wir dürfen also gespannt sein, was in Zukunft noch alles mit diesem Tool möglich sein wird und ob es eventuell sogar eine Drupal-Integration für die automatisierte Bereitstellung der benötigten Markup-Schnipsel geben wird.
