Top 12 CSS Frameworks and How to Understand Them

March 28, 2008 - 108 Comments
CSS, Popular

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)

Subscribe via RSS or Follow us on Twitter

Share This Post

There are 42 Comments › Leave your comment

Evert de Ruiter
28 Mar, 2008

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

Great work,

Evert de Ruiter

Reply
Tashjian - Webshop
28 Mar, 2008

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

Reply
Tashjian - Webshop
28 Mar, 2008

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/

Reply
Jase
28 Mar, 2008

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!!!!

Reply
Kel
28 Mar, 2008

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.

Reply
james leville
28 Mar, 2008

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

Reply
Welcome to Paradise
28 Mar, 2008

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.

Reply
Mauro De Giorgi
29 Mar, 2008

You forgot this:

http://960.gs/

is for grid design

Reply
Carol Leftforth
29 Mar, 2008

Dont overlook the Drupal/PHP phptemplate system.

http://drupal.org/node/171194

Reply
alex
30 Mar, 2008

A very good list, thanks!

Reply
romand
30 Mar, 2008

order from best?

Reply
Ganesh
21 Apr, 2008

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.

Reply
Mike
5 May, 2008

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/

Reply
Lucy
26 May, 2008

A very good list

Reply
tomy
15 Jul, 2008

thanks for u information

Reply
Donanım Dersleri servis
11 Aug, 2008

CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

Reply
Rajveer Singh Rathore
12 Aug, 2008

[...]These days, CSS frameworks are quite a buzz word in web world. I am not sure how many people use it but surely there are plenty of cost-free options available for everyone. Weather it a big team or an independent designer who work on different projects on a regular basis[...]

Reply
rose
21 Aug, 2008

hello, im new at css, and i would like to know what is the difference between css frameworks and templates? great article! bye

Reply
Aleksandar
22 Aug, 2008

Is there some site with real life examples? Examples that use some of these frameworks.

Reply
Shaggy
22 Sep, 2008

Yeah,
I didn’t like any of the existing ones so i wrote my own. http://simpl.romack.net/ it’s only about 200 lines not compacted.

Reply
s. tunji turner
27 Sep, 2008

howdo i download and test simpl.css

Reply
Shaggy
4 Oct, 2008

s. tunji turner
I will make a download and put up some better documentation prob. a cheatsheet.
There are comments in the existing css though.

Reply
Steve
1 Dec, 2008

To download simpl.css go here: http://simpl.romack.net/styles/simpl.css

Hope that helps.

Reply
Steve
1 Dec, 2008

*CORRECTION*
http://simpl.romack.net/Styles/Simpl.css

Note: The url is case sensitive, so if you’re typing it please be aware of that.

Reply
Unobtrusive CSS
2 Dec, 2008

http://unobtrusivecss.com/ – Common sense CSS framework.

Reply
S.Ali Qamar
16 Jan, 2009

Wow excellent work, I never knew if there were any CSS frameworks at all. I am just wondering where the web development is going to be in the 2009. Its all about frameworks now, you’ve got PHP frameworks, you have got JavaScript frameworks, tools and libraries, Ajax frameworks and libraries etc. Could you please put all these into a one comprehensive article sometime so they actually give an overall broader view of what web designing and development is all about in these days. Thanx

Reply
Mushex Antaranian
22 Feb, 2009

nice post, actual after a year )
test also jQuery UI (http://jqueryui.com/)

Reply
ghansham
23 Feb, 2009

i think u forgot to add 960 framework

Reply
Csaba
12 May, 2009

960.gs is a must to mention here

Reply
francisa
21 May, 2009

thanks!

Reply
Phil
22 May, 2009

Really interesting and useful artcile – thanks!

Reply
Carlos A. Cabrera
11 Jun, 2009

Good list!

I like BluePrint a lot.

Just posted an intro about Web Frameworks in general and you’ve been linked.

Carlos

Reply
Moataz El Wesimy
14 Jun, 2009

what about CSS MECHANO, give it a look

Reply
San
5 Aug, 2009

960 GS is a must try. I have tried YAML and Yui (complex) and blueprint (messy). Nothing beats the simplicity of 960 grid system.

Reply
San
5 Aug, 2009

960 GS is a must try. I have tried YAML and Yui (complex) and blueprint (messy). Nothing beats the simplicity of 960 grid system.

Reply
dzieyzone
25 Aug, 2009

960 gridder is also one of the best css framework.

Reply
RobotAyatollah
3 Sep, 2009

I used Blueprint CSS for a major website: the new CCA – Canadian Centre for Architecture. The site has a minimalist aesthetic with a lot of varying templates – over 18 basic configurations in all – that all adhere to the same basic grid – which is wrapped in a semi-liquid, multi-column layout. For the liquid elements of the site, I created my own solutions. But for most of the site BP was the obvious choice, it really saved a lot of time and was very easy to work with. I really think CSS frameworks are the way to go on any major project that needs to handle multiple layouts, dynamic pages of any significant number and needs to be easily upgraded in the future. the price you might pay in code overhead is easily offset by the coherence many frameworks, namely BP and YUI, offer.

Reply
tarif
8 Sep, 2009

i found this one more to my liking.
snowdust.download from http://www.wedoui.com/

Reply
Dave
3 Oct, 2009

I love the 960 Grid System, the best imo

Reply
brain
9 Nov, 2009

In development but very interesting for the philosophy at the foundation and the high quality/efficiency of the code : http://github.com/stubbornella/oocss/

Reply
waqas
12 Dec, 2009

great list to look at and learn css frameworks

Reply
izdelava strani
10 Jan, 2010

WOW! Your footer really blew my mind. Excellent.

Reply