Style Guide Template
A customizable Style Guide template, to gather design guidelines and share them with colleagues and clients.
Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!
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.
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;
Delete the SCSS and Partials folders, then play with the
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).
Uploading your own branding assets is super easy: just open the assets > branding folder and replace the existing images. Done!
SASS users can update the variables at the beginning of the
style-guide.scss file. The additional colors shades are automatically created using the
darken SASS functions. CSS users can look for the Color section (
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).
xButtons and update the style. Again, we automatically add the code below the buttons using jQuery.
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.
xForm and update the style.
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.