Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Maintaining Own Components Library with Living ...

Rob
February 03, 2015

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

Rob

February 03, 2015
Tweet

More Decks by Rob

Other Decks in Technology

Transcript

  1. @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.
  2. @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”
  3. @operatino Style Guide Types • Content and editorial style guides

    • Branding and identity style guides • Development style guides and coding standards • Front-end style guides
  4. @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
  5. @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)
  6. @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
  7. @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
  8. @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/
  9. @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
  10. @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
  11. @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
  12. @operatino SourceJS Future • CSS documentation support • Full markdown

    support • Set of scaffolded project examples • Authorization, feed, dashboards and more… SourceJS.com
  13. @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
  14. @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
  15. @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
  16. @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
  17. @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
  18. @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