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)

  • RSS
  • TwitThis
  • del.icio.us
  • StumbleUpon
  • Digg
  • Mixx
  • Technorati
  • Facebook
  • Furl
  • Ma.gnolia
  • NewsVine
  • SphereIt
  • Netvouz
  • Reddit
  • description
  • BlinkList

Leave your Comment here

Name (required)

Email (required)

Website

Write your comment below.

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

Trackbacks

  1. Los 12 mejores CSS Frameworks | Kabytes
  2. 12 frameworks CSS que deberías conocer | aNieto2K
  3. Chris Carlson » links for 2008-03-28
  4. trainingo2.net
  5. links for 2008-03-29 at DeStructUred Blog
  6. links for 2008-03-29 « toonz
  7. Los 12 frameworks de CSS más top &raquo Dubo.cl
  8. » Top 12 CSS Frameworks and How to Understand Them Webcreatives
  9. Cybermagic » Blog Archive » Top 12 CSS Frameworks
  10. links for 2008-03-30 « Brent Sordyl’s Blog
  11. 20080401 網摘 — Arthur C. Clarke - 網絡暴民 Jacky’s Blog
  12. links for 2008-03-31 at graemehunter.co.uk
  13. a study in process + image + space » Blog Archive » links for 2008-03-31
  14. Блог Волотко Дмитрия - Это нормально © :: Entries :: 10 CSS фраймворков и что это такое
  15. [網摘] 20080402 « Oceanic | 人生海海
  16. Brève 14: jQuery, wallpaper, CSS, listes …
  17. Which Social Networks Provide the Best Design-Related Content? | Vandelay Website Design
  18. links for 2008-04-04 | Eugeni’s blog
  19. Top 12 CSS Frameworks | gEEK tHE pLANET
  20. Two Mad Geeks » CSS Frameworks & How To Understand Them
  21. 12 frameworks CSS
  22. callmebird » Blog Archive » CSS Frameworks
  23. Web Tasarımla ilgili 676 link
  24. Frameworks CSS | Desarrollo Web, Django, Python, Web2.0 | Culpable de mis opiniones !!
  25. WordPress Blog » 12 frameworks CSS
  26. 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net
  27. 9 Top CSS Essential Skills That Every Web designer Should Learn « Kurt’s Rasmussen Class Weblog
  28. Web Developer Blog - Downloadtube.com » Blog Archive » Free CSS Frameworks For Instant Development of Website Layouts
  29. El Rallador, Accesibilidad, Usabilidad y Est
  30. Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber
  31. Ronda frameworks CSS » Criterion
  32. Getting Started with Application Building | Binary Crunch
  33. CSS tips that every beginning developer should know | Arbenting
  34. Heita! » Blog Archive » CSS Frameworks - The what, why, who and possibly even where
  35. Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği « Bay Bedava - Netten Başlıklar
  36. Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği | Atkn Klkn'ın not defteri
  37. The newbie guide to running a design business. Part 1.
  38. CSS Frameworks Suck | Are you Insane?
  39. her web tasarımcının öğrenmesi gereken 9 önemli css yeteneği |
  40. YUI Grids vs Blueprint | Spigot Design
  41. stign.no | CSS frameworks
  42. Programare web, dezvoltare personală » CSS framework
  43. Web Design - Electronic Arts UK Community
  44. Web Design Industry Jargon: Glossary and Resources | How-To | Smashing Magazine
  45. css framework « TTO
  46. BluePrint CSS Framework (Updated)
  47. Top 12 CSS Frameworks | hyperdigitalinteraction Inc.
  48. Arbenting's Cliff's Notes to CSS | Arbenting
  49. Top 12 CSS Frameworks | VisualGraf Comunicación