Maintaining Own Components Library with Living Style Guides

Video recording: http://youtu.be/Fr23VpM6wl4

Creating Living Style Guides, Pattern libraries and building UI frameworks is becoming the next big thing for all Front-end developers and Web designers. When modular approach and flat, minimal UI arises, developers seek for ideal and reusable approach for developing websites. This is where Style Guides for the Web comes on stage.

Robert will present a full-depth review of current ways of maintaining own component libraries using Living Style Guide tools. Talk is focused both for developers, who seeks the ways of handling web components and their UI frameworks and web designers, pushing the standardized and consistent design to their projects.

On the web, with clickable links http://rhr.me/pres/style-guides.pdf

Transcript

1. Maintaining Own Components Library with Living Style Guides Robert Haritonov @operatino & rhr.me
2. @operatino COMPONENT LIBRARIES
3. @operatino COMPONENT LIBRARIES Also known as UI FRAMEWORKS and PATTERN LIBS
4. @operatino UI Component Library is a collection of reusable blocks for building front-end interfaces. These blocks could be reused both in scope of one or a group of websites.
5. OOCSS
6. Bootstrap
7. Libraries and Frameworks
8. Modular development
9. @operatino STYLE GUIDES
10. @operatino “Style guides set a precedent, demonstrating how the designer or developer expects something to be done in future. Coding standards guides are particularly good at this: hundreds of people could be working on the same project, so consistency in the way code is written makes sense.” Anna Debenham, A pocket guide “Front-end Style Guides”
14. @operatino Style Guide Types • Content and editorial style guides • Branding and identity style guides • Development style guides and coding standards • Front-end style guides
15. @operatino Components Libraries + Living Style Guides
16. @operatino Front-end engineers + Web Designers
19. @operatino Why do you want it?
20. Documentation
21. Consistent UI and Codebase
22. Testing
23. Communication, Performance, Education, Prototyping, Product delivery, Maintenance …
24. @operatino Tools
25. @operatino CSS doc parsers KSS, StyleDocco, Kalei Styleguide, Hologram, Styledown, DSS Style Guide platforms Pattern Lab, Pattern Primer, SourceJS, Living Style Guide gem Fabricator, BEM tools Standalone modules Theo - Design Property converter DSS - CSS doc parser Starter kits Style Guide Boilerplate, Barebones, Google Web Starter Kit https://github.com/davidhund/styleguide-generators
26. CSS Doc Parsers http://warpspire.com/kss
27. CSS Doc Output https://github.com/kss-node/kss-node
28. @operatino KSS • First CSS parser • Syntax does not support custom HTML • Ported to Node, PHP, Java and Python • Extendable through custom API • Used in Github Components Lib (custom app)
29. @operatino • Based on improved KSS syntax • Supports markdown and Angular directives • Uses Shadow DOM for style encapsulation https://github.com/SC5/sc5-styleguide https://github.com/thomasdavis/kaleistyleguide • Browser based CSS parser and simple doc generator
30. @operatino • Listed tools repeats each other with small differences • Hologram is Ruby based • StyleDocco supports iframes for examples http://trulia.github.io/hologram http://jacobrask.github.io/styledocco/index.html https://github.com/styledown/styledown
31. DSS https://github.com/darcyclarke/DSS Comment styleguide and parser for CSS. Outputs structured JSON for later styling.
32. @operatino Style Guide Platforms
33. Pattern Lab http://patternlab.io/
35. menu/ images menu.css menu.js menu.doc menu.html
36. @operatino Pattern Lab • First Style Guide platform • Generates Library from Mustache tpl files • Include tools for testing responsive layouts • Follows Atomic Design System principles http://bradfrost.com/blog/post/atomic-web-design/
37. Atomic design
38. @operatino • Parses Markdown files with custom syntax • Generates simple one page documentation • Has many automation plugins for Grunt/Gulp etc http://livingstyleguide.org/ https://github.com/adactio/Pattern-Primer • Small script, that gathers html files into one page
41. Fabricator http://resource.github.io/fabricator/
43. @operatino Fabricator • Generates Library from HTML and Markdown • Have built in tools for watch serve and build • Nice minimalistic tool for creating simple UI library
44. SourceJS http://sourcejs.com
45. source-block/ images block.css block.js index.src info.json
46. @operatino SourceJS • Dynamically rendered • Modular and scalable core (Node.js) • Rich plugin system • Gathers documentation from EJS and other tpls • Focuses on building large scale libraries • Lives in Amsterdam
50. @operatino SourceJS Future • CSS documentation support • Full markdown support • Set of scaffolded project examples • Authorization, feed, dashboards and more… SourceJS.com
51. @operatino CSS doc parsers KSS, StyleDocco, Kalei Styleguide, Hologram, Styledown, DSS Style Guide platforms Pattern Lab, Pattern Primer, SourceJS, Living Style Guide gem Fabricator, BEM tools Standalone modules Theo - Design Property converter DSS - CSS doc parser Starter kits Style Guide Boilerplate, Barebones, Google Web Starter Kit https://github.com/davidhund/styleguide-generators
54. @operatino Summing up!
55. @operatino CSS doc parsers Pros: + Easy to setup and deliver + Documentation right next to your CSS styles Cons: - Hard to scale, only for documenting atoms - Problems with HTML sync and complex examples - Pollutes CSS sources
56. Atomic design Different rules for different components types
57. @operatino Pattern Lab Pros: + Easy to setup and deliver + Following very flexible Atomic design system + Set of tools for responsive testing Cons: - Very opinionated file structure - Hard to scale
58. @operatino SourceJS Pros: + Dynamic page rendering + Scalable core and modular architecture + Focuses on communication and processes within a team + Treated as platform both for docs, testing and development Cons: - High entry barrier - Harder to ship - Requires basic NodeJS knowledge
59. @operatino Small projects DSS, Fabricator, Living Style Guide gem, Pattern Primer Mid-sized projects Pattern Lab, SourceJS, [Fabricator], [Living Style Guide gem] Big teams and scaling projects SourceJS, Pattern Lab, BEM tools, + built-in Style Guide API systems
60. @operatino Building tools for Style Guide Systems focus first on standalone, reusable modules.
61. @operatino Further read • Compilation of SG resources http://styleguides.io • http://maban.co.uk/projects/front-end-style-guides • http://bradfrost.com/blog/post/style-guide-best-practices • http://allthestyleguides.tumblr.com • http://www.slideshare.net/stubbornella/styleguide-jsconf • https://github.com/google/web-starter-kit/issues/446 • http://twitter.com/operatino
62. Robert Haritonov @operatino & rhr.me Thank you!