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)

82 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/

14. Lucy on May 26, 2008 4:36 am

    A very good list

15. tomy on July 15, 2008 9:49 pm

    thanks for u information

16. Donanım Dersleri servis on August 11, 2008 12:39 pm

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

17. Rajveer Singh Rathore on August 12, 2008 1:17 am

    [...]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[...]

18. rose on August 21, 2008 6:54 pm

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

19. Aleksandar on August 22, 2008 7:23 am

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

20. Shaggy on September 22, 2008 1:19 pm

    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.

21. s. tunji turner on September 27, 2008 4:59 pm

    howdo i download and test simpl.css

22. Shaggy on October 4, 2008 8:52 am

    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.

23. Steve on December 1, 2008 6:22 pm

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

    Hope that helps.

24. Steve on December 1, 2008 6:25 pm

    *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.

25. Unobtrusive CSS on December 2, 2008 6:50 pm

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

26. S.Ali Qamar on January 16, 2009 3:55 am

    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

27. Mushex Antaranian on February 22, 2009 11:12 pm

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

28. ghansham on February 23, 2009 1:37 am

    i think u forgot to add 960 framework

29. Csaba on May 12, 2009 10:53 pm

    960.gs is a must to mention here

30. francisa on May 21, 2009 7:32 pm

    thanks!

31. Phil on May 22, 2009 7:56 am

    Really interesting and useful artcile - thanks!

32. Carlos A. Cabrera on June 11, 2009 9:40 am

    Good list!

    I like BluePrint a lot.

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

    Carlos

33. Moataz El Wesimy on June 14, 2009 2:18 am

    what about CSS MECHANO, give it a look

Mini Icon for only $13 (Advertise Here)

Recent Twitter Visitors

News from the Design Community

• 100 Creative Twitter Backgrounds Featuring Illustration | Webdesigner Depot
• 10 incredibly cool WordPress shortcodes
• The Ultimate List Of Online Color Tools For Web Developers
• 35 CSS-Lifesavers For Efficient Web Design | CSS | Smashing Magazine
• 23 Colorful And Inspiring Web Designs Where Textures Are In Full Action @ SmashingApps
• 30 High-Quality Icon Sets for E-Commerce Designs
• 25+ Useful Infographics for Web Designers | Webdesigner Depot
• 50 Fresh JavaScript Tools That Will Improve Your Workflow | Developer's Toolbox | Smashing Magazine
• 41 Sleek Single Page Websites | Inspiredology
• 7 Rich & Creative User Interfaces and How to Create Your Own | Noupe