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.

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