Styleguides für alle(s)

Styleguides für alle(s)

Vortrag über Styleguide-Driven Development vom Webkongress Erlangen 2016

5d013e754c25db0d33c6cc25fba3dc71?s=128

Matthias Mees

March 09, 2016
Tweet

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