What is a good online resource for css 'design patterns'?

Question

Hi,

Can anyone out there recommend a good online resource for CSS 'design patterns'?

I know design patterns in a software context usually refer to OO based design patterns, but I mean design patterns in the broader sense of the term: i.e. common, clean solutions to common problems / tasks.

An example of such a resource would be this list of table designs, this gives you all you really need to know about how to make tables look nice using a set of CSS techniques.

Other examples of common problems which could have nice set solutions would be things like rounded corners on divs, highly usable form layouts etc.

Answer 1

The css-discuss page on 3-column layouts is a great resource for CSS column layout patterns.

Answer 2

You may want to check CSS Design Patterns.

Answer 3

I refer to A List Apart articles all the time for those sorts of things. They do a lot of trial-and-error research to come up with really creative ways to handle those common CSS problems in the cleanest most portable way possible.

Answer 4

The already mentioned A List Apart is really good. Another site I've used since I started web development is SitePoint.com. Here is their CSS Reference. If you want a good CSS book their's is one of my favorites.

Answer 5

• CSSZenGarden
• CSSDesignPatterns

Answer 6

Some websites that address web design patterns are listed below. They do not specifically provide the HTML and/or CSS in order to achieve the desired results, but they do provide examples of live sites that you can view source on (or, even better, use Firebug).

UI-patterns

This is probably the best of the bunch. It breaks things down into categories that cover the breadth of web page design tasks. You'll find categories such as tag-clouds, live preview and user registration among many others. This is a really comprehensive resource that is well organized. It explains each pattern and provides plenty of examples.

Pattern Tap

Similar to UI-Patterns although currently not as comprehensive. It takes a more social approach to collating design patterns by allowing users to create their own categories ("user sets") and populate them with their own selection of sites.

Yahoo Design Pattern Library

Unlike the other two, this one doesn't provide many examples of real sites. It is well organized and quite comprehensive.

Elements of Design

This is a blog showcasing various elements of web design. It doesn't discuss the patterns, but is good as a quick source of inspiration, or as a means to start your own analysis.

Answer 7

The Floatutorial is a great starting point for learning the important CSS attribute "float" and how to use it to layout content using some common patterns including two-column and three-column liquid layouts.

Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

Answer 8

I like the Yahoo! UI Library Grids CSS for layout.

Answer 9

The nearest thing to a "design pattern" in CSS are common layouts. The best tool for taking advantage of common layouts, column widths, etc. is 960 grid system, at 960.gs

Watch this screencast for a brief intro. It saves a ton of time, and helps you apply all the common layout patterns with minimal code:

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

All you have to do is to apply the proper classes and do a little arithmetic to make sure all the column widths add up.

The one book that I recommend the most for CSS is CSS Mastery by Andy Budd (cssmastery.com). It is somewhat small, but it has helped me more than any other CSS book.