edit-article

Article Description: By Susan Robertson - @alistapart.com - Susan describes the process of creating a style guide (aka pattern library) which documents the "styles" used on a website

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">creating a style guide</h1> <h2>[WHAT]</h2> <ol> <li>]&nbsp;<a href="http://alistapart.com/article/creating-style-guides">http://alistapart.com/article/creating-style-guides</a>&nbsp;-&nbsp; To me, a style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it&rsquo;s a one-stop place for the entire team&mdash;from product owners and producers to designers and developers&mdash;to reference when discussing site changes and iterations. Several companies have even put their guides online; Starbucks is the most well known of the bunch, but others exist</li> </ol> <h2>[WHY]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[WHERE]</h2> <ol> <li>]</li> </ol> <h2>[WHEN]</h2> <ol> <li>]</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>] starbucks</li> <ol> <li>] has their websites style guide posted online</li> </ol></ol> <h2>[HOW-TO]</h2> <ol> <li>]</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>]</li> </ol> <h1 style="text-align: center;">&nbsp;</h1>