Lately I’ve been really impressed and experimented joyfully with
Compass and Sass. They make css/layout design fun again for me. Even if the whole tool chain is in Ruby you don’t have to touch any Ruby to use them – don’t misunderstand me: I like Ruby and I’ve been a Rails early adopter; my brain is very well tuned in with Python, that’s all -.

Compass makes the creation of a semantic layout using any of the
popular css frameworks (blueprint, 960, etc.) a breeze.

There’s ton of documentation around, for example this is what got me into it a while ago.

So today after a furious coding spree I achieved what I wanted. I integrated Compass into a default Pinax project.

To prove that I could quickly change the layout in an elegant way I tried to alter the default theme to have the menus vertically aligned instead than horizontally.

I know people love pretty pictures and screenshots so here is a taste of the end result:

And another one:

And if you find any of this interesting be my guest and peruse the newly created github project:

• The master just plugs in Compass without changing anything in the default theme. You can alter the layout by working in the media/sass folder and running compass -u in the media folder.
• The vertical branch includes the changes needed to come up with the vertical menu you see above. By looking into the media/sass/base.sass file you should see how to use Compass directives to include a 960 grid into Pinax.

Please note, this is nothing fancy nor hard, but I expect this integration to be a life/time saver in all my next projects.