style guide
November 26, 2014 | 24 Feedbacks

Style Guide Template

A customizable Style Guide template, to gather design guidelines and share them with colleagues and clients.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

A Style Guide is a collection of design guidelines, to be used as a reference by teammates  – and clients – while collaborating on a web project. While it’s particular useful for big projects, it can be handy for small ones too.

A common approach to a style guideline is to create a Photoshop file and share it. The problem with that is lack of flexibility. A .psd file can be annoying to update and share. Clients in most cases won’t even open you Photoshop files, so you better save .jpg copies as well.

Using a CSS Style Guide, on the other side, it’s way more convenient! You have at your disposal the power of CSS (and SASS!) to quickly make updates. Once it’s online, sharing is a piece of cake. By making it responsive, you don’t need a different file for each device: just use media queries and elements will adapt to different viewport sizes.

So we decided to create this template, that can be used to create your own style guide on the fly!

The icons included have been created by the talented Petras Nargela and can be downloaded for free on Freebiesbug.

SASS users

This template is gonna be particular yummy for SASS users, mostly because of the use of variables for colors and fonts. We split the style in style-guide.scss, which is the only one you need to personalize the template, and _basic-style.scss, where we put the basic style that you don’t care to deal with. Here is a glimpse at the code:

CSS users

Delete the SCSS and Partials folders, then play with the style-guide.css file.

General style

The first part of the style-guide.css file (style-guide.scss for SASS users) is used to customize the main elements of the template (i.e. the page background-color, the Header and some patterns like the boxes that surround some design elements).

1. Branding

Uploading your own branding assets is super easy: just open the assets > branding folder and replace the existing images. Done!

2. Colors

SASS users can update the variables at the beginning of the style-guide.scss file. The additional colors shades are automatically created using the lighten and darken SASS functions. CSS users can look for the Color section (/* Color section - basic style */) and update the swatches background colors. Don’t worry about the hexadecimal values below each color swatch, we’ll create them for you (using javascript).

3.  Typography

Navigate to xTypography (it’s a CSS comment) and update the style from there. Don’t worry about the html, you may notice some pieces are missing. That’s because we fill the info (i.e. font used and size) for you. The cool part is those info update on resize, so you can check headers font size on mobile by resizing the browser (or checking the style guide from your mobile device).

4. Buttons

Navigate to xButtons and update the style. Again, we automatically add the code below the buttons using jQuery.

5.  Icons

Just replace the icons inside assets > icons. If you want to add more icons, remember to update the HTML and navigate to xIcons section - basic style (inside _basic-style.scss for SASS users) to update the CSS as well.

6. Form

Navigate to xForm  and update the style.

Download assets

Just a small detail: the style guide could be a good place where to store and download some branding assets (vector logos, icons…). Hence we included a Download Assets button on top-right, which links to a .zip file inside the Assets folder. Just create your own file with relevant assets and replace ours.


Nov 26, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • George Mwaniki

    Thank you for sebastiano, i was looking to do something like this, your tutorials are always eye openers, You should start some training, am looking to take my front-end to the next level and i think you can really help. keep up the good work.

    • Sebastiano Guerriero

      Thanks George! A video course is something we are thinking about, as a next level content for CodyHouse. Def on the radar ;)

      • Uzzair Baharudin

        Really? Oh my, can’t wait for it :D

      • Timmy

        I would definitely love to see this too!

  • Martín Mednik

    Thank you! Very nice template

  • JerryAlmeidaFoxx

    Very userful, thanks @seguerriero:disqus

  • Robyn

    Super useful – thanks Sebastiano.

  • nancy kirumara

    Great job and thank you for sharing your work ! that will be super useful ! Sebastiano Guerriero

  • Alex McCabe

    Everything on this site is so well designed. I love it.

  • Mike Mai

    Good stuff! The only thing that seems odd is that the radio button is also displaying a check.

    • Sebastiano Guerriero

      That is true. I’m not changing it in the demo just because it’s super easy to change the one we created with 2 different icons (one for radio and one for check boxes)

  • Timmy

    More!!! FASTER!!!!

  • L34ndr0

    firefox don’t support the CSS property “appearance”, so…your selectbox will broken

    • Sebastiano Guerriero

      Well, it’s not broken, it works just fine. Since we couldn’t find a way to remore the arrow from a element in firefox, we removed our custom icon instead. The appearance won’t be the same, that for sure. But as Cederholm says, that is OK:

      • Sam

        It seems the default arrow is now being removed in the current version of Firefox (at least that’s what I’m seeing), so we end up with no arrow at all.

  • Ratbek

    Super, very well

  • Sarah Bennet Mills

    Superb template. We have showcased it in our monthly round-up of best dribbble freebies here:

  • Daniel McClintock

    You guys are rock stars. Keep up the excellent work.

  • shntrnr


  • Tavin

    absolutely helpful. just keep doing great things

  • Kevin Mamaqi

    Best styleguide I’ve found. Thank you!

  • bingles

    Simple and solid. Thanks!

  • Nene

    Very nice!

  • Luis Stegmann

    Hi there!

    Thanks for the incredible tool. I’d like to know if there is a way to show font information editing main.js this way:

    heading = $(‘.headers’);
    setTypographyInfo(heading, ‘h1′);
    setTypographyInfo(heading, ‘h2′);
    setTypographyInfo(heading, ‘h3′);
    setTypographyInfo(heading, ‘h4′);
    setTypographyInfo(heading, ‘h5′);

    So after every I can display typography info, like you did for H1.

    Thank you