CSS frameworks & Compass

I have been looking harder at CSS frameworks recently because I am always looking for ways to improve my craft.
I have been playing with typogridphy a little recently after reading giles post on using it for a miniapp.

More recently I have read about where typogridphy comes from. I had heard about blueprint, quite a while ago, but I still thought that building things myself was the best way to go. Now, I am tired of dealing with CSS annoyances so frameworks look more appealing. Typogridphy was built on top of 960 which is a somewhat opinionated CSS framework.(saying CSS framework sounds funny to me). 960 gives you a bunch of reasonable default classes and such to make getting started easier.

This is pretty cool. But, there are some drawbacks. The problem is they create semantically void classes and ids that you need to use for your stuff to work.

Even though I want my hand to be held a bit, I also want my markup to make sense.

What to do?

I have been using sass for styling for a while now, and it has made dealing with CSS easier by making nesting more convenient and added things like variables which CSS does not have. It has been pretty awesome.

Also it has mixins, which are sort of like bags of properties that can be inserted into classes, etc. Check it out.

=heading_text
  :font
    :size 120%
    :weight bold
h1
  +heading_text

These mixins allow you to do all sorts of interesting things, like get around the having to use semantically meaningless classes etc for stuff to work. Chris Eppstein wrote Compass, a CSS meta-framework. The idea is to port major CSS frameworks to sass as mixins and then create a way to access them without having all the code hanging out in your app tree.

It redefines what would be classes, ids etc as sass mixins instead, so you can add them to your semantic class names. Which in is what I want to be able to do anyway.

Check it out.

Comments are closed.