Introduction to style guides and short case study of Brighton Fringe Style Guide.

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