← Back Home

A look at themes with Compass (Part 1)

As you may of heard, I'm working on a new project (meetee), which will allow a more collaborative approach to meetings.

Over the last few days I've concentrating my efforts on getting the website design implemented using the following technologies:-

• Ruby on Rails
• MongoDB
• Compass CSS Framework

I've written about Compass before, and in this article (and the next) I want to concentrate on how I dealt with setting up themes.

Compass wouldn't be possible without Sass, the underlying language. Sass allows you to define variables (among other things), and this becomes particularly useful when defining base colours for your website theme(s). For instance, I defined the following base colours for my "Roast" theme. In the below example, see how you can perform operations on hex colours to make a lighter or darker shade. This is important! When you change the base colours, the correct shades will be applied to the derived colours.

The Roast Theme

Once I had this theme set-up, I used the defined variables throughout my Sass code in Compass. This allowed me to create more "theme" sass files with different colours defined:-

The Raindrop Theme

And since I'm using Ruby on Rails I thought this would be fitting...

The Ruby Theme

Pretty damn cool! As you can see, it will be very easy to integrate different themes at any time. I'm really loving Compass and Sass!

In the next post I'll show how I structured the files and how I plan to load the appropriate CSS file dynamically.

If you haven't checked out Compass, do it now - It's the future!