<p>Can anyone out there recommend a good online resource for CSS 'design patterns'?</p>

<p>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.</p>

<p>An example of such a resource would be <a href="http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/" rel="noreferrer">this list of table designs</a>, this gives you all you really need to know about how to make tables look nice using a set of CSS techniques.</p>

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

[{'answer_id': 35632, 'author': 'cpm', 'author_id': 3674, 'author_profile': 'https://Stackoverflow.com/users/3674', 'pm_score': 3, 'selected': True, 'text': '<blockquote>\n  <p>I refer to <a href="http://www.alistapart.com/" rel="nofollow noreferrer">A List Apart</a> articles all the time for those sorts of\n  things.</p>\n</blockquote>\n\n<p>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.</p>\n'}, {'answer_id': 35649, 'author': 'codeLes', 'author_id': 3030, 'author_profile': 'https://Stackoverflow.com/users/3030', 'pm_score': 0, 'selected': False, 'text': '<p>The already mentioned <a href="http://www.alistapart.com/" rel="nofollow noreferrer">A List Apart</a> is really good.  Another site I\'ve used since I started web development is SitePoint.com.  Here is their <a href="http://reference.sitepoint.com/css" rel="nofollow noreferrer">CSS Reference</a>.  If you want a good CSS book their\'s is one of my favorites.</p>\n'}, {'answer_id': 37735, 'author': 'Charles Roper', 'author_id': 1944, 'author_profile': 'https://Stackoverflow.com/users/1944', 'pm_score': 4, 'selected': False, 'text': '<p><strong>Some websites that address web design patterns are listed below</strong>. 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 <em>view source</em> on (or, even better, use <a href="http://getfirebug.com/" rel="noreferrer">Firebug</a>).</p>\n\n<h2><a href="http://ui-patterns.com/" rel="noreferrer">UI-patterns</a></h2>\n\n<p>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.</p>\n\n<h2><a href="http://patterntap.com/" rel="noreferrer">Pattern Tap</a></h2>\n\n<p>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.</p>\n\n<h2><a href="http://developer.yahoo.com/ypatterns/" rel="noreferrer">Yahoo Design Pattern Library</a></h2>\n\n<p>Unlike the other two, this one doesn\'t provide many examples of real sites. It is well organized and quite comprehensive.</p>\n\n<h2><a href="http://www.smileycat.com/design_elements/" rel="noreferrer">Elements of Design</a></h2>\n\n<p>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.</p>\n'}, {'answer_id': 211733, 'author': 'J c', 'author_id': 25837, 'author_profile': 'https://Stackoverflow.com/users/25837', 'pm_score': 2, 'selected': False, 'text': '<p>The <a href="http://css.maxdesign.com.au/floatutorial/" rel="nofollow noreferrer">Floatutorial</a> 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.</p>\n\n<blockquote>\n  <p>Floatutorial takes you through the\n  basics of floating elements such as\n  images, drop caps, next and back\n  buttons, image galleries, inline lists\n  and multi-column layouts.</p>\n</blockquote>\n'}, {'answer_id': 1507899, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>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 <strong>960 grid system</strong>, at <strong>960.gs</strong></p>\n\n<p>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:</p>\n\n<p><a href="http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/" rel="nofollow noreferrer">http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/</a></p>\n\n<p>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.</p>\n\n<p>The one book that I recommend the most for CSS is <strong>CSS Mastery</strong> by Andy Budd (<strong>cssmastery.com</strong>). It is somewhat small, but it has helped me more than any other CSS book.</p>\n'}]
['https://Stackoverflow.com/questions/35615', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1349865/']