The
Style Guide
Platform
Robert Haritonov
@operatino & rhr.me
Slide 2
Slide 2 text
@operatino
Senior Front-end Consultant
Backbase (~50 Front-end devs)
Head of Front-end Development
OK.ru (10 Front-end devs)
Robert Haritonov @operatino
Slide 3
Slide 3 text
@operatino
Why Style Guides?
• Improve team collaboration
• Speed up development and increase UI quality
• Build consistent Front-end
@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”
@operatino
2011 KSS - inline CSS documentation
2013 Pattern Lab with Atomic Design
2014 Style Guide Driven Development
Slide 19
Slide 19 text
@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
Slide 20
Slide 20 text
Modular development
Slide 21
Slide 21 text
Componentizing The Web
Slide 22
Slide 22 text
@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
@operatino
2011 KSS - inline CSS documentation
2013 Pattern Lab with Atomic Design
2014 Style Guide Driven Development
2015… The Style Guide Platform
Slide 25
Slide 25 text
@operatino
The Style Guide Platform
• Promotes development best practices
• Helps to structure the codebase
• Integrates advanced tooling and workflows
Slide 26
Slide 26 text
@operatino
It’s Showtime!
Enough Talking
Slide 27
Slide 27 text
@operatino
Demo contents (check recording)
• Style Guide Driven Development basic
• Example of Style Guide page with component
states
• Demo of in-place commenting capabilities
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
@operatino
In-place Communication
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
@operatino
Unified Experience
Integrate Various Tools Into
Slide 33
Slide 33 text
@operatino
Integrations
Slide 34
Slide 34 text
Testing Capabilites
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
@operatino
Development Environment
Customize Your
Slide 43
Slide 43 text
@operatino
Re-define Your Workflow
Editor Browser
Slide 44
Slide 44 text
@operatino
Re-define Your Workflow
Style Guide
Platform
Editor Browser
@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.
Slide 50
Slide 50 text
@operatino
Project Style Guide
Workflow
Style Guide
Designers
Developers
Product Client
Including components
and dev. tools
Slide 51
Slide 51 text
Style Guide Platform
Slide 52
Slide 52 text
SourceJS.com
Slide 53
Slide 53 text
@operatino
Beginning
And it’s Only a
Slide 54
Slide 54 text
@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
Slide 55
Slide 55 text
@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