CSS Style Guides

A list of example pattern libraries from popular websites

Pattern libraries, also known as style guides, are a helpful tool in designing and developing websites. For large-scale projects, style guides can serve as a communication tool, keeping the UI design and code consistent throughout the project.

Below is a list of style guides I collected from various talks and articles, to help provide some inspiration on creating your own:

• A List Apart — http://patterns.alistapart.com/
• Android — https://developer.android.com/design/index.html
• Baseline CSS — http://baselinecss.com
• BBC — http://www.bbc.co.uk/gel
• Bootstrap — http://getbootstrap.com/components/
• Bootstrap Style — http://stylebootstrap.info/
• Brad Frost — http://bradfrost.github.io/this-is-responsive/patterns.html
• Code for America — http://style.codeforamerica.org/
• Drupal — http://styleguide.allgoo.de/
• Ebay — http://uipatterns.ebay.com/pe
• Fellowship Technologies — http://developer.fellowshipone.com/patterns/
• Foundation — http://foundation.zurb.com/docs/components/typography.html
• Google — http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
• Google Material Design — http://www.google.com/design/spec/material-design/introduction.html
• Isobar — http://isobar-idev.github.io/code-standards/#_web_typography
• Kalei — http://kaleistyleguide.com
• Lonely Planet — http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
• MailChimp — http://ux.mailchimp.com/patterns
• MailChimp Email — http://mailchimp.com/resources/email-design-guide/
• Mapbox — https://www.mapbox.com/base/
• Mozilla — https://www.mozilla.org/en-US/styleguide/
• Oli — http://oli.jp/2011/style-guide/
• Patternry — http://patternry.com/p=progress-bar/
• Paul Robert Lloyd — http://paulrobertlloyd.com/about/styleguide/
• Pears — http://pea.rs/
• Salesforce — http://sfdc-styleguide.herokuapp.com/
• South Tees Hospitals — http://southtees.nhs.uk/style-guide/
• Starbucks — http://www.starbucks.com/static/reference/styleguide/
• UI Patterns — http://ui-patterns.com/patterns
• Yahoo — http://developer.yahoo.com/ypatterns/
• Yelp — http://www.yelp.com/styleguide