There are some styling challenges that come up again and again. Things like centering an element vertically or creating a group of panels that wrap the text intelligently as the browser gets smaller. Lucky for you, developers out "in the wild" have published some of their solutions in the form of "Pattern Libraries".

Pattern libraries are little recipes for making widgets look exactly the way you want them to, saving you the effort of hacking together the CSS yourself. They are often used by companies to help incoming developers see the kinds of styles (e.g. for buttons or forms) they can easily implement using the existing CSS.

Though some pattern libraries are meant to be independent (like Pears you'll see below), others are provided by companies as a way of showing new developers to their platform the best way of using their existing CSS to produce certain widgets. For example, Mailchimp has a pattern library that uses their own CSS patterns. These corporate libraries will probably be less useful to you when you're first starting out (because they rely on Mailchimp's CSS files) than the independent ones.

In this very brief lesson, we'll introduce you to a helpful pattern library that should save you some time with particularly annoying tasks.

CSS Component Libraries List

There are a few other useful independent pattern libraries and tools. If you know of any we've missed, tell us!

1. Pure CSS A set of small, responsive CSS modules that you can use in every web project.
2. Animate CSS Just-add-water CSS animations from Daniel Eden.
3. CSS3 Patterns from Lea Verou
4. nth-child Recipes from CSS-Tricks
5. 7 Super Easy CSS3 Recipes to Copy and Paste from Joshua Johnson at DesignShack shows you how to make some pretty cool typography effects using just CSS3.
6. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

Wrapping Up

Hopefully you'll keep these libraries in your back pocket for that time in the future when you need to build a particular kind of widget. In general, though, consider these pattern libraries simply an interesting tool for your toolbox. It's most important for you to focus your energies on understanding markup than memorizing the exact ways to produce particular widgets.

• Getting Started with Pattern Libraries from A List Apart
• Mailchimp's Pattern Library
• Code for America's Pattern Library
• 7 Super Easy CSS3 Recipes to Copy and Paste from Joshua Johnson at DesignShack shows you how to make some pretty cool typography effects using just CSS3.
• Getting Started with Pattern Libararies by Anna Debenham via A List Apart
• Mailchimp's Pattern Library, though it doesn't expose the CSS directly.
• Starbucks' Pattern Library doesn't expose the CSS directly but contains some interesting promo layouts.

Sorry, comments aren't active just yet!