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

The Style Guide Platform

Rob
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.

Rob

May 07, 2015
Tweet

More Decks by Rob

Other Decks in Technology

Transcript

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

    View Slide

  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

    View Slide

  3. @operatino
    Why Style Guides?
    • Improve team collaboration
    • Speed up development and increase UI quality
    • Build consistent Front-end

    View Slide

  4. View Slide

  5. @operatino
    Style Guides
    The History Behind

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. @operatino
    The “Living” Part
    Most Challenging is

    View Slide

  11. @operatino
    2011 KSS - inline CSS documentation

    View Slide

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

    View Slide

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

    View Slide

  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”

    View Slide

  15. Atomic design

    View Slide

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

    View Slide

  17. View Slide

  18. @operatino
    2011 KSS - inline CSS documentation
    2013 Pattern Lab with Atomic Design
    2014 Style Guide Driven Development

    View Slide

  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

    View Slide

  20. Modular development

    View Slide

  21. Componentizing The Web

    View Slide

  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

    View Slide

  23. menu-component/
    images
    menu.sguide
    menu.css
    menu.js
    menu.tpl

    View Slide

  24. @operatino
    2011 KSS - inline CSS documentation
    2013 Pattern Lab with Atomic Design
    2014 Style Guide Driven Development
    2015… The Style Guide Platform

    View Slide

  25. @operatino
    The Style Guide Platform
    • Promotes development best practices
    • Helps to structure the codebase
    • Integrates advanced tooling and workflows

    View Slide

  26. @operatino
    It’s Showtime!
    Enough Talking

    View Slide

  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

    View Slide

  28. View Slide

  29. @operatino
    In-place Communication

    View Slide

  30. View Slide

  31. View Slide

  32. @operatino
    Unified Experience
    Integrate Various Tools Into

    View Slide

  33. @operatino
    Integrations

    View Slide

  34. Testing Capabilites

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. @operatino
    Development Environment
    Customize Your

    View Slide

  43. @operatino
    Re-define Your Workflow
    Editor Browser

    View Slide

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

    View Slide

  45. View Slide

  46. View Slide

  47. @operatino
    Workflows
    Example

    View Slide

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

    View Slide

  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.

    View Slide

  50. @operatino
    Project Style Guide
    Workflow
    Style Guide
    Designers
    Developers
    Product Client
    Including components
    and dev. tools

    View Slide

  51. Style Guide Platform

    View Slide

  52. SourceJS.com

    View Slide

  53. @operatino
    Beginning
    And it’s Only a

    View Slide

  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

    View Slide

  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

    View Slide

  56. Robert Haritonov
    @operatino & rhr.me
    Thank you!

    View Slide