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:

// color palette - these colors will be the color swatches of the Colors section

$color-1: #5f8ee4; // Cornflower Blue - Action color
$color-2: #19191a; // Dark Blue
$color-3: #e4655f; // Red
$color-4: #e6e6e6; // light grey
$color-5: #ffffff; // white

// additional colors

$success: #6fce72; // green
$alert: $color-3;  // red

// fonts

$primary-font: 'Merriweather', serif;
$secondary-font: 'Open Sans', sans-serif;

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.