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

The Style Guide Platform

The Style Guide Platform

Video recording: https://youtu.be/vw2Ii2pPxzQ

With the rise of modular web and CSS frameworks, having well structured UI documentation is a must. You probably have already heard about Living Style Guides for the web and CSS documentation, but what lays beyond simple pattern libraries?
Style Guide Platform is the next big thing for building and collaborating on maintainable component libraries. Following Style Guide driven development evolution, we are able to combine various tools for testing, communication and living documentation support in nice, consistent environment.
Let’s explore the possibilities of next-gen UI development and management approach, following the broad experience of world-class teams and Front-end centric companies.

Robert Haritonov

May 07, 2015

More Decks by Robert Haritonov

Other Decks in Technology


  1. The Style Guide Platform Robert Haritonov @operatino & rhr.me

  2. @operatino Senior Front-end Consultant Backbase (~50 Front-end devs) Head of

    Front-end Development OK.ru (10 Front-end devs) Robert Haritonov @operatino
  3. @operatino Why Style Guides? • Improve team collaboration • Speed

    up development and increase UI quality • Build consistent Front-end
  4. None
  5. @operatino Style Guides The History Behind

  6. None
  7. None
  8. None
  9. None
  10. @operatino The “Living” Part Most Challenging is

  11. @operatino 2011 KSS - inline CSS documentation

  12. CSS Doc Parsers http://warpspire.com/kss

  13. CSS Doc Output https://github.com/kss-node/kss-node

  14. @operatino “Websites are systems rather than pages and as soon

    as we stop perceiving them as that, the better.” Anna Debenham, A pocket guide “Front-end Style Guides”
  15. Atomic design

  16. @operatino 2011 KSS - inline CSS documentation 2013 Pattern Lab

    with Atomic Design
  17. None
  18. @operatino 2011 KSS - inline CSS documentation 2013 Pattern Lab

    with Atomic Design 2014 Style Guide Driven Development
  19. @operatino “Style Guide Driven Development is the practice of using

    the Style Guide as the focal point for all front-end UI development tasks.” Matt Fordham, Talk: Styleguide Driven Development
  20. Modular development

  21. Componentizing The Web

  22. @operatino Before • What markup and JS do I need?

    After • What modules is this page made of? • Do I need to create any new ones? • Future modules and pages start in Style Guide
  23. menu-component/ images menu.sguide menu.css menu.js menu.tpl

  24. @operatino 2011 KSS - inline CSS documentation 2013 Pattern Lab

    with Atomic Design 2014 Style Guide Driven Development 2015… The Style Guide Platform
  25. @operatino The Style Guide Platform • Promotes development best practices

    • Helps to structure the codebase • Integrates advanced tooling and workflows
  26. @operatino It’s Showtime! Enough Talking

  27. @operatino Demo contents (check recording) • Style Guide Driven Development

    basic • Example of Style Guide page with component states • Demo of in-place commenting capabilities
  28. None
  29. @operatino In-place Communication

  30. None
  31. None
  32. @operatino Unified Experience Integrate Various Tools Into

  33. @operatino Integrations

  34. Testing Capabilites

  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. @operatino Development Environment Customize Your

  43. @operatino Re-define Your Workflow Editor Browser

  44. @operatino Re-define Your Workflow Style Guide Platform Editor Browser

  45. None
  46. None
  47. @operatino Workflows Example

  48. @operatino Style Guide Driven Workflow Style Guide Designers Developers Production

    Testers Managers
  49. @operatino Providing Style Guide as a feature, clients then able

    to continue extending delivered components utilizing all the benefits of the specialised tool. product deliverable contains UI kit and a widgets collection within a fork of our Style Guide Platform.
  50. @operatino Project Style Guide Workflow Style Guide Designers Developers Product

    Client Including components and dev. tools
  51. Style Guide Platform

  52. SourceJS.com

  53. @operatino Beginning And it’s Only a

  54. @operatino Takeaways • Style Guide Platform defines a single entry-point

    for all Front-end development processes • It helps to maintain consistency in the codebase, communication and product UI • Use Style Guides to improve team performance and empower best practices
  55. @operatino Further Investigations • SourceJS.com • Style Guide Tools overview

    bit.ly/lsg-overview • Talks, articles and podcast styleguides.io • And follow me on twitter @operatino
  56. Robert Haritonov @operatino & rhr.me Thank you!