Are you a Drupal themer? Do you work with Compass, Susy, Sass? Are you looking to build your next site using the very latest in frontend development tools?

You’ve come to the right blog post then. We’ve been doing our own deep-thinking about themes here at Four Kitchens, and were playing with a lot of new technologies when we came across the Aurora theme developed by Sam “Snugug” Richard. It’s a HTML5, Sass/Compass-powered, mobile-first base theme, and even includes a Compass extension to build your own sub-theme! It handles a lot of features for you — like jQuery Update with local fallback — and all of the templates are up to the very latest standards in HTML5 development.

Project Corona

I’ve also contributed some of the work on our own boilerplate theme into the compass extension, so you can have a great set of tools and the CSS to hit the ground running. We’ve called this project “Corona”, and it’s part of the Aurora compass extension. We’re constantly working on seeing how our Sass partials can be best set up, and will update Corona to reflect those changes.

What makes Corona unique? We’ve created a few mix-ins, variables, font stacks, and settings that we’ve found immensely helpful. These are a compilation of standard tools we find ourselves using on every site, and wanted to have a fast, easy way of starting project with them. We think these tools are helpful enough that everybody should be able to work with them. If you have any suggestions, submit a pull request on the Github repo that houses what the sub-theme should be. We will then convert this into the Aurora compass extension.

How to Implement Aurora / Corona

To install the Aurora compass extension, first ensure you have ruby gems installed, then run the following lines of code:
gem install susy
gem install compass-aurora

If you already have the Aurora compass extension, ensure that you have at least version 1.0.2 by running this command:
gem update compass-aurora

Next, download Aurora put it in your theme directory, then you can create your own sub-theme with Compass. Select one of the two lines below, depending if you want to use Corona (the Four Kitchens sub-theme), or the standard Aurora/Susy sub-theme. Make sure you replace [theme-name] with your own theme name to ensure Compass names all hooks and files appropriately.

compass create [theme-name] -r aurora --using aurora/corona

Aurora / Susy
compass create [theme-name] -r aurora --using aurora/susy

Helpful Information

There you have it, you have a sub-theme that you can start designing your site with. Sam and I will be updating Aurora frequently as we find new features that should be included. You can always see the current state of the project on If you have any suggestions, put them up on the project issue queue. Sam has also published a free book within the iTunes store that is very helpful in its documentation of Aurora, check it out for more helpful hints.

Image Credit: NASA on Flickr