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

The Style Guide Platform

May 07, 2015

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.


May 07, 2015

More Decks by Rob

Other Decks in Technology


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

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

    up development and increase UI quality • Build consistent Front-end
  3. @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”
  4. @operatino 2011 KSS - inline CSS documentation 2013 Pattern Lab

    with Atomic Design 2014 Style Guide Driven Development
  5. @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
  6. @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
  7. @operatino 2011 KSS - inline CSS documentation 2013 Pattern Lab

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

    • Helps to structure the codebase • Integrates advanced tooling and workflows
  9. @operatino Demo contents (check recording) • Style Guide Driven Development

    basic • Example of Style Guide page with component states • Demo of in-place commenting capabilities
  10. @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.
  11. @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
  12. @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