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.
4 Design Patterns You Should Know for Web Development: Observer, Singleton, Strategy, and Decorator.
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).
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.
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.
Unlike the other two, this one doesn't provide many examples of real sites. It is well organized and quite comprehensive.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With