I do plenty of writing and one of the vital important tools in my kit is the manner guide. If I ever have a doubt about exactly where an apostrophe should go or learn how to hyphenate a phrase, i’m able to turn to the AP Stylebook or the Yahoo Style Guide and discover what the superior editors in web or print need to say about it. I also dabble in web development and design, but I’m less skilled with HTML, CSS, and JavaScript than i’m with the English language, so i locate myself constantly turning to the net design equivalent of Strunk and White: the pattern library.

Just as with language style guides, pattern libraries serve two main purposes. They offer a collection of coding or design standards web development teams can apply across a domain, helping to keep consistent coding practices and appearance over the years and across different developers. Secondly, they’re a treasure trove of recommendation for anyone who desires to learn website design best practices from designers who’ve learned their trade at the front lines.

In this text I’d desire to share the 7 website design style guides / pattern libraries i locate myself turning to usually. I’m going to stretch the definition of pattern library somewhat and include guides that run the gamut from coding best practices to true design pattern collections.

Google HTML/CSS Style Guide

I’m going initially a straight-up coding style guide from Google, which details the company’s advice to its coders as to how they need to write and format their HTML and CSS. Much of this recommendation within reason arbitrary sounding, like starting a brand new line for each selector and declaration in CSS, however the strictures are developed through years of expertise and if you’re a newbie coder, it’s an invaluable start as you develop your personal preferred style.

Yahoo Pattern Library

This one is a real design pattern library, and as such, it tries to present solutions to design problems all web designers will face, including how Yahoo likes its designers to address navigation, interaction, and layout.

A List Apart Pattern Library

A List Apart is one of the best known website design blog on the web. They recently released their very own pattern library as element of an effort to open source their site. The pattern library includes the site’s solutions to design issues at the side of illustrative HTML code snippets (and naturally that you would be able to try the CSS too).

Responsive Website design Patterns

This one is kind of how I learned the main points of responsive design: it covers everything from layouts to pictures with simple and straightforward to grasp examples.

Interaction Design Pattern Library – Welie.com

It will not be essentially the most up-to-date looking site, but it surely definitely delivers the design pattern goods. It’s probably the most comprehensive pattern library I’ve encounter and provides patterns for just about every situation a designer will face.

Starbucks Style Guide

I’m going to round out the list with just a few pattern libraries from companies that experience created well-regarded sites. First up is the Starbucks Style Guide, that spills the beans at the elements which are used to construct the ever present coffee retailer’s site.

MailChimp Pattern Library

Last up, MailChimp’s site is a chic and easy interface into their email marketing service. Here’s how they made it.

If you’ve got a fave pattern library or style guide you’d desire to share, be at liberty to say it within the comments.