Matt Bee is a freelance developer based in the UK who has worked on websites for organizations like the National Theatre and Brighton Fringe. He discusses how traditional style guides focused only on print and lacked guidance for online design. Living style guides address this by styling base elements, building modular components to handle different content, and documenting each part. This allows for focused design, less messy code, and quicker integration. Bee then provides examples of tools and resources for building living style guides and discusses his successful experience creating one for the Brighton Fringe 2016 website.

1. STYLE GUIDES IN
THE WILD

2. MATT BEE
@MATTBEE
HTTP://TODAYISHOULD.COM
WHO?

3. • Freelance Developer based in Sevenoaks
• Front End & Technical Consultant on National Theatre
2016 website (launches 12th April)
• Front End Developer on Brighton Fringe 2016
website (live)
• Other recent clients include Macmillan, Independent
Age, Odeon
WHAT DO YOU KNOW?

4. • “A set of standards for the
design of documents, signage,
and any other form of other
brand identifier”
• Broad coverage for print
• Very limited online reference
WHAT IS A STYLE GUIDE?

5. • The same design elements would change
page by page
• CSS and HTML becomes messy and not
semantic
• Bloated code and hard to implement
WHAT WAS WRONG?

7. • Focused design
• Content independent
• Documented
• Quicker build
• Quicker integration
LIVING STYLE GUIDES

8. • Style the base elements
• Build up modules to handle possible
content
• Document each module
• Build everything from the ground up,
evolving what already exists
• Build pages last and from designed
modules
HOW?

9. TOOLS
http://styleguides.io/
WEBSITE STYLE GUIDE RESOURCES

10. STYLE GUIDE BOILERPLATE
https://github.com/mattbee/Style-Guide-Boilerplate
Forked from http://bjankord.github.io/Style-Guide-Boilerplate/

11. PATTERN LAB
http://patternlab.io/

12. • Brighton Fringe 2016
• Complex ticketing and
performance based design and
development
• Drupal integration
• Flexible for future theming
CASE STUDY

13. • Document all the content
and required modules
• Design based on
wireframes containing all
modules
• Clear theme and style for
throughout the site
DESIGN

14. • Build atoms and base
styles/elements first
• Build each module from
constituent parts, building
on existing styles
• Build out pages last
• http://brightonfringe.review-now.net/
BUILD

15. • Tight timelines met
• Really easy implementation in Drupal
• Easier bug fixing due to modules structure
• Easy to use modules to integrate for new types of
content in Drupal
• Easy to update style guide for 2017 festival theme
SUCCESS

16. — Nobody at Starbucks
WE DO SOME THINGS RIGHT -
WE MIGHT NOT PAY OUR TAXES, BUT
WE HAVE AN AWESOME STYLE GUIDE
”
“
http://www.starbucks.com/static/reference/styleguide/

17. THANKS
Next Up:
Calum Ryan - Taking Part in the IndieWeb
Matt Bee
http://www.todayishould.com
http://www.twitter.com
http://www.mattbee.co.uk