Style Guide Template
A customizable Style Guide template, to gather design guidelines and share them with colleagues and clients.
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.
Download Here
Credit
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.
Download Here
Credit
Hit me with a comment!