Top 12 CSS Frameworks and How to Understand Them

by CSS

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.

Please note that this post is fairly old and some of the information may be out dated.
Perhaps you would prefer to browse our CSS category.

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)

Author: (566 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook, on Digg or you can subscribe via RSS.