Maintaining Own Components Library with Living Style Guides

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

Bad3e55f0b96b80bc4ffb40d1c1414dc?s=128

Robert Haritonov

February 03, 2015
Tweet

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”
  11. None
  12. None
  13. None
  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

  17. None
  18. None
  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/

  34. None
  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
  39. None
  40. None
  41. Fabricator http://resource.github.io/fabricator/

  42. None
  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
  47. None
  48. None
  49. None
  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
  52. None
  53. None
  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!