Front-end Style Guides

A style guide is a set of rules and standards to help enforce consistency. Originally created for publications and organisations, they are now commonplace in front-end web design and development.

My first experience with a style guide, although nothing like how I know them to be structured today, was in creating an HTML document to preview typography on the Web. While I was working at Hellocomputer in 2010, embedding custom Web Fonts via @font-face was still quite tricky for consistent cross-browser rendering. So I created a template so that the designer and I could see how a font family would render in the browser. Fortunately we had Paul Irish’s bulletproof @font-face syntax article along with Font Squirrel’s free service for converting web fonts. Things are a little easier nowadays with the wide selection of font families provided by services like Google Fonts and Typekit.

Fast forward nearly 4 years and the style guides I build and work with are complex systems, with typography forming only one section of the entire guide. Needless to say, typography is one of the more important aspects of web design, but there are numerous other components to consider. Based on Pattern Lab’s philosophy of “atomic design”, we need to cater for all the standard HTML elements, which are the building blocks for our design. These are combined to form patterns and later, templates which are finally displayed as the web pages our users see in their browsers.

OrderIn Front-end Style Guide
The front-end style guide I created for OrderIn.

Whilst some clients I’ve worked with haven’t fully grasped all the benefits of style guide driven development, there have been a few major advantages. The biggest benefit of this approach, is the ability to view the basic design styles in the browser as actual HTML elements far earlier in the project life cycle. Some of which includes typography and color palettes. This allows for earlier communication and discussion over design decisions, which can be easily altered at this early stage. No longer is the client left in the dark for months before the “big launch”.

Personally, I’ve found the ability to write better and more consistent HTML and CSS as a result of being able to troubleshoot cross-browser inconsistencies of elements and patterns in isolation. No longer are you trying to debug why a single element isn’t rendering correctly in a template due to some or other overriding style. It’s also forced me to work in a more modular way and look at reusing elements and patterns wherever possible. Because you’re building a system and not creating individual templates, you start to quickly see how pages are structured and what is shared and common amongst them.

The style guide I created for my website is quite basic, focusing primarily on typography. I found it helpful, even with a small number of templates, to have a consistent set of styles which I could define once and use throughout the website.

Anna Debenham recently started a super project on GitHub, which is a collection of style guide resources. She, along with a bunch of contributors have added articles, examples and tools to help you understand and create your own style guides. It’s great to see how the community contributed and worked together to consolidate all these amazing resources under one URL.

If you have any resources of your own, please feel free to contribute to the project.

  1. How to restore the Personal Hotspot on your iPad in iOS 8

    A few weeks ago I upgraded my 4th generation iPad (retina) to iOS 8. However, I was recently working remotely and to my disappointment, the option to create a personal hotspot on my iPad was missing.

    Continue Reading
  2. PhpStorm performance optimisation tips

    My first experience of JetBrains products was back in 2006 with IntelliJ when I was doing Java development. Over the last few years I’ve been happily using PhpStorm, but I’m always keen to optimise it’s performance wherever possible.

    Continue Reading
  3. Cape Town UX Craft – August Meetup

    The topic for the most recent meetup was: Content’s Forgotten Corners, presented by content strategist Kerry-Anne Gilowey.

    Continue Reading
  4. Cape Town Front-end Developers – July Meetup

    Building a front-end style guide with Jekyll was the topic for the most recent Cape Town Front-end Developers meetup. The topic was presented by Justin Slack who currently works at New Media Labs.

    Continue Reading
  5. Cape Town UX Craft – July Meetup

    The Cape Town UX Craft is a group on the popular service, Meetup. They held their second meetup on the 23rd of July at Ogilvy’s office in Cape Town.

    Continue Reading
  6. Accessing a Grunt connect server on your WiFi network

    Until now, I haven’t found a way to easily view my front-end HTML templates on my phone or iPad, without uploading them to a live (staging) server.

    Continue Reading
  7. Working remotely can work

    I spent last year freelancing, but was offered a great opportunity to work at Joe Public n (now known as Next) on a full-time basis this year.

    Continue Reading
  8. Tips for freelance front-end web developers

    Having just reflected on my year of freelancing, I thought it would be good to look back and share some of things that helped make my year a successful one.

    Continue Reading
  9. Reflecting on a year of freelancing

    When I began this chapter of my life as a freelance front-end web developer, I had the best of intentions, but obviously had no idea on how it would pan out.

    Continue Reading
  10. Hello World!

    Welcome to my small, but carefully positioned footprint in the world wide web. With over 10 years of industry–related experience, I made the decision to specialise in front-end development towards the end of last year, 2012.

    Continue Reading