STYLE GUIDES IN
THE WILD

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

• 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?

• “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?

• 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?

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

• 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?

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

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

PATTERN LAB
http://patternlab.io/

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

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

• 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

• 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

— 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/

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