Be Present Now

Sometimes witty, sometimes childish. Add gesticulation, shake.

How to integrate Compass into your default Pinax project

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:

vertical menu in pinax theme

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.

2 July 2009

Sign up to receive my next blog posts via email: