Contact Us
  • How to Create a Style Guide

    Style guides have grown in popularity because of their usefulness in the responsive web design process. Style guides enable designers, developers and clients to communicate around typography, colors, textures and patterns.

    Style guides should be done in HTML & CSS so that typography and color decisions will be accurate. Graphics programs, like Photoshop, render text differently, and prove less useful when creating style guides.

    Collect Common HTML Patterns

    A good way to create a style guide is to first create a list of commonly used HTML patterns. If you have your own code snippets collection, that would be a great starting point. If you need some inspiration, Dan Cederholm’s site, and Paul Robert Lloyd’s project, Barebones, both offer excellent examples of carefully crafted markup patterns.

    Studying the markup patterns of others can help you improve your own.

    Create Your Blank Canvas

    You don’t need too much custom styling included in your style guide template. Try and get your style guide to your own ideal version of a blank canvas.

    You might choose to just use the basic and minimal default styling of the browser. Or if you want to go for even more extreme blankness, you can use a CSS reset such as Eric Myer’s Reset or the HTML5 Reset.


    HTML with only the browser’s default CSS. It’s pretty, pretty functional.

    Add Minimal Layout to Your Style Guide

    This may be too barebones of a starting point for you. You may have common typography patterns that you use on most projects. If so, it would make sense to have these in your default style guide to save you time.

    Also, if you choose to include image patterns in your style guide (such as an article with an image aligned to the left), it helps to do the basic positioning of those elements as part of your default style guide. Take care of floats and positioning ahead of time, so that you have a simpler style guide that is ready for instant use.

    Customize Your Style Guide for Your Purposes

    To be effective, ask yourself what your style guide needs to communicate and to whom? Are you a designer using your style guide to communicate with a developer? What would make their job easier? Ask them. Link to whatever font information they may need such as embed codes or links to Google Web Fonts or Typekit.

    For a style guide to work, it needs to be easy to use and to update. Make it simple and adaptable to the needs of designers, developers and clients so that it becomes a way to communicate and itterate upon stylistic decisions.

    Using Your Style Guide

    This post is mostly focused on creating the basic elements you need to begin your style guide template (namely markup patterns and stripped down CSS). Of course the real fun comes in when you get to start using your style guide to communicate visual design decisions.

    You will need browser based tools that allow you to explore color, fonts and typographic scales to name a few. You want to create an environment which quickly enables you to experiment in the browser. This is beyond the topic of this post, and likely something that you will constantly be working on as you grow your web design toolkit.

    If you are looking for some more style guide inspiration, Anna Debenham has a thorough article about Front End Style Guides.

    Great article about Front End Style Guides

    What about you? Have you used style guides? Style guides sometimes get a bad wrap as being too generic. Do you have any tips or tricks that help you create useful style guides? I’d love to hear in the comments…

    Speak Your Mind