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
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
5. @operatino Style Guides The History Behind
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
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
29. @operatino In-place Communication
32. @operatino Unified Experience Integrate Various Tools Into
33. @operatino Integrations
34. Testing Capabilites
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
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!