Top 12 CSS Frameworks and How to Understand Them

Most designers would have heard of the term ‘CSS Frameworks’, for those who don’t know or aren’t sure, here is a brief description from: Wikipedia:

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage. .

Sounds great doesn’t it, something that is going to make designing and developing a website that little bit easier. It will take away the repeating of the same old boring stuff and if you write your framework correctly you will be guaranteed your code will meet W3C recommendations. That will leave you plenty of time to design your site, the fun side of the job!

There are a number of Frameworks you can freely download and use, you will need a fair bit of CSS knowledge, some patience and a fair bit of time to get yourself familiar with the layout. The page layout structure is pretty standard across almost all Frameworks, it could be: Header; Main Content; Sub Content; Local Nav; Main Nav; Footer. They also have simple layout structures: Vertical Nav; Horizontal Nav; One Column; Two Column… The variations on structure goes on and on… Any structure you want, basically.

What I am trying to say is that if you are a serious designer/developer you need to use a good Framework, something that in the long term is going to save you a lot frustrations and time. Maybe you will or already have written your own Framework. I have my own, well two actually. One purely for Wordpress and one for everything else. Not much difference in the two, but I do like to follow a particular method when designing for Wordpress, just my preference.

There is a lot more to CSS Frameworks than I have written here, but I am not going to bore you, download them and try them out. If you don’t like it don’t use, its not for everyone. As with everything else in the world there are a few critics of CSS Frameworks, the pros do outnumber the cons, its all about opinion.
As for me I love them, and I am very grateful to the writers of the following ten CSS Frameworks:

12 of the best CSS Frameworks

1.Elements CSS Frameworks (Source: Project Designs)

2.WYMstyle: a CSS framework (Source: Daniel Reszka)

3.YAML CSS Framework (Source: High Resolution)

4.YUI Grids CSS (Source: Yahoo)

5.Boilerplate CSS Framework

6.Blueprint CSS

7.Schema Web Design Framework
(Source: David Golding Design)

8.CleverCSS

9.Tripoli Beta CSS Framework
(Source: Monc)

10.ESWAT Web Project Framework
(Source: Philip Karpiak)

11.CwS CSS Framework
(Source: Content with Style)

12.My (not really mine) CSS Framework
(Source: That Standards Guy)

34 Comments so far

1. Evert de Ruiter on March 28, 2008 7:44 am

   You’re doing such great work collecting incredibly usefull information for webdesigners.

   Great work,

   Evert de Ruiter

2. Tashjian - Webshop on March 28, 2008 12:50 pm

   Thanks for this links. Here’s another CSS general purpose resource, http://webshopinabox.peter-tashjian.com/WebShopInABox.htm

3. Tashjian - Webshop on March 28, 2008 1:39 pm

   I actually meant to provide the following URL for a site that has 101 CSS inspirational galleries http://www.virtualhosting.com/blog/2008/inspiration-overload-100-css-galleries-you-need-to-check-out/

4. Jase on March 28, 2008 2:08 pm

   css frameworks suck, only a n00b would use a css framework. Eric myers reset.css and a simple typography.css is on the other hand ok to use as a base. But other than that css frameworks are bloated and encourage bad practice!!!!

5. Kel on March 28, 2008 6:44 pm

   Hmm- maybe it’s not a full framework, but it’s at least on par with Boilerplate - Check out http://960.gs 960 Grid System from Nathan Smith. It’s pretty straightforward.

6. james leville on March 28, 2008 8:49 pm

   Thanks.. before i read your post.. i only know css framework from yahoo..

7. Welcome to Paradise on March 28, 2008 9:46 pm

   Of all the above I like YUI Grids CSS the most. I’d also tried Blueprint CSS but I sticked to the previous one. Its the best.

8. Mauro De Giorgi on March 29, 2008 6:41 am

   You forgot this:

   http://960.gs/

   is for grid design

9. Carol Leftforth on March 29, 2008 6:52 am

   Dont overlook the Drupal/PHP phptemplate system.

   http://drupal.org/node/171194

10. alex on March 30, 2008 9:29 am

    A very good list, thanks!

11. romand on March 30, 2008 9:29 pm

    order from best?

12. Ganesh on April 21, 2008 1:23 am

    Thanks for the nice compilation of css frameworks. I have my own css framework as well, but, when i go thru each one of them, i am able to learn a thing or 2.

13. Mike on May 5, 2008 2:08 pm

    I’ve been working on one that combines the grid of Blueprint with the typography of Tripoli. http://capsizedesigns.com/blog/2008/04/bluetripcss-a-fusion-of-blueprint-and-tripoli/

Read more, & get in touch...