Grow your CSS skills. Land your dream job.

CSS Frameworks Roundup (and some thoughts)

Published by Chris Coyier

The guiding theory behind CSS frameworks is saving time. If you write a lot of CSS, you know you write a lot of the exact same code over and over and over. There is something to be said of learning through repetition, but seriously, how many times do you need to type margin: 0 before it's just annoying?

CSS frameworks are usually just a collection of CSS files that set up things like basic typography, form styling, grids/simple layout, and resets.

Why use a framework? Besides saving time, there are lots of reasons: standardizing the organizational structure of your sites, avoiding dumb little mistakes, and browser compatibility. Sounds pretty compelling, but there are certainly reasons not to use them as well. For example, a framework might be too much for the site you are designing and it's basically just unnecessary bloat. Another common argument against frameworks is that CSS and XHTML go hand in hand, they need to be designed and constructed together, so using pre-written CSS just isn't an option.

As for me, I'm on the fence. I'm actually kind of a "tweener". I have a little base folder that has an index.html file, a style.css file, and an images folder. The index file has a super simple structure in it, the CSS file has some very basic styling in it, and the images folder is empty. I'm pretty happy with this system, but I'm thinking about growing it into a more fleshed out framework.

Hey, this is supposed to be a Roundup! Oh, right.

Every one of these has a different approach. I'll let you explore for yourselves.

Blueprint
blueprint.gif

LogicCSS
logiccss.gif

Elements
elements.gif

YAML (Yet Another Multicolumn Layout)
yaml.gif

ESWAT
eswat.gif

MORE

Yahoo YUI Grids CSS
WYMstyle
That Standards Guy CSS Framework
Taffy Framework
Schema
CleverCSS
Tripoli

Wow, there sure are a lot of them aren't there? I may work on putting one together myself, but I'll need to think of some kind of clever twist to make it more than just another brick in the wall.

Comments

  1. Volkan Görgülü
    Permalink to comment#

    I prefer writing my own code since I only write what I need. But these framworks can contain more than what I actually need.

    I use Eric Meyer’s Global Reset, and I start to write my code. And at the end, when I look to the CSS file, it is clean and it is what I need.

    Best Regards

  2. Permalink to comment#

    Recently if starting from scratch I have tended to use YUI Grids and reset with my own typography set based on Vertical rhythm ideas
    Interestingly when it comes to Javascript I have tended to shy away from YUI in preference to jquery (to much a Drupal fan boy)strange how these things happen.

  3. @Volkan: I am with ya, I like writing from scratch so you become intimately familiar with every line of code and and avoid any bloat.

    @Tim Nash: I love jQuery too, I’m just starting to use it but really makes for some intuitive and easy javascript.

  4. I tried using one of these frameworks but the extra rubbish scared me off. It is one of the things that I hate when modifying code especially someone elses.

  5. Permalink to comment#

    These are definitely interesting. I’m going to have to give Yahoo’s framework a try.

  6. Joe S
    Permalink to comment#

    Thanks for the list of frameworks. I know your “on the fence”, but do you have plans to dig a bit deeper into one of these? Perhaps a tutorial or review of some kind? I was checking out Blueprint 0.7, and find it interesting but severely lacking adequate documentation.

  7. @Joe S: I think what I’m going to do is publish what I use a lot of times as my own little “framework” for designs. I probably won’t go through all the hoop-la of naming it and crap, but at least I can share it and see what people think.

  8. A very good overview!
    Unfortunately, the link to the Taffy Framework is broken – but if you replace “www” for “v1″ in the url, you should find the page.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".