Styleguides für alle(s)

Vortrag über Styleguide-Driven Development vom Webkongress Erlangen 2016

Transcript

1. Styleguides
 für alle(s)
2. • Matthias Mees, @yellowled • HTML, (S)CSS, CMS • netzgestaltung.net • yellowled.de • Webkrauts, Serendipity
3. Was ist überhaupt ein Styleguide?
4. • beschreibt, wie bestimmte Elemente eines oder mehrerer Kommunikationsmittel zu gestalten sind • einheitliches Erscheinungsbild (Corporate Identity) • verbesserte Kommunikation durch Konsistenz und Standardisierung
5. • Markenidentität • Designsprache • Sprach-/Text-Stil • Coding-Stil
6. styleguides.io – „Der Eine Link“
7. Die Evolution des
 Styleguides (Aus Sicht des Webdesigns)
8. 1. Print-Styleguide (PDF) 2. Statischer Styleguide (HTML/CSS) 3. Living Styleguide (Generator) 4. Styleguide Driven Development (Pattern-Library)
9. Styleguide Driven Development – warum?
10. 1. „mobile first“: beginnend mit Basiselementen 2. modular: ergänzt um „eigene“ Module/Layouts 3. agil: isoliert gestalten, verteilte Teams → Es kommt der Art und Weise, wie wir heute in Projekten arbeiten, entgegen und unterstützt sie.
11. Gestaltung
 „auf Verdacht“
12. • selbst „einfache Websites“ sind heute komplex • (fast) hinter jeder Site steckt ein (mächtiges) CMS • viele Sites haben benutzergenerierte Inhalte → Es gibt Inhalte, die wir nicht konkret vorhersehen können, also müssen wir „auf Verdacht“ gestalten.
13. Aber das kostet doch!
14. • Evaluierung und Integration kostet Zeit • Styleguide statt Prototyping spart Zeit • … als Referenz spart Kommunikationsaufwand • … als Referenz spart Dokumentationsaufwand
15. Wie erzeugt man
 Styleguides? (Möglichst ohne wahnsinnig zu werden …)
16. Sehr simpel
17. Statisches HTML Poor Man's Styleguide
18. Simpel
19. Dynamisch erzeugtes HTML (Serverseitig mit PHP)
20. • Style Guide Boilerplate • Barebones
21. • doc • base • element.md • patterns • markup • base • element.html • patterns
22. Ein gewisser Aufwand
23. KSS und Artverwandte Aus der Dokumentation erzeugte Styleguides
24. • kss-node (Node, KSS) • DocumentCSS (Node, Custom-Tags, kein Stylus) • mdcss (PostCSS, Markdown, nur CSS) • hologram (Ruby, Markdown) • livingstyleguide (Ruby, Markdown, nur Sass)
25. Ziemlich viel
 Aufwand (Aber es lohnt sich …)
26. PatternLab patternlab.io
27. PatternLab-Beispiel foodbank.bradfrostweb.com/patternlab/v10/
28. Atomic Design Fest mit PatternLab verwoben
29. • PHP als einzige Anforderung (node-Version) • Patterns: Mustache-Templates • Atoms, Molecules, Organisms, Templates, Pages • Quelltext, Anmerkungen, Bildschirmgrößen • Watch/Auto-Reload möglich
30. Bonus-Level (Für die mit GANZ viel Zeit und Budget)
31. Rizzo rizzo.lonelyplanet.com
32. Eigene Komponenten-API engineering.lonelyplanet.com/2014/05/18/a- maintainable-styleguide.html
33. Danke für’s zuhören. slideshare.net/matmees