Rails, Compass, HTML5 Boilerplate and Heroku

Overview

HTML5 provides some great functionality but also, potentially, some headaches. HTML5 Boilerplate is a template which aims to solve the various cross-browser differences.

There is a gem to use HTML5 Boilerplate in a rails app which uses Compass to build the CSS. Using Compass on Heroku requires a small workaround as Heroku limits where an app can write to.

Setup

For a new Rails App: Follow the process in prior post on setting up a new project.

After the rspec and cucumber installs run

When asked, select yes for change of SASS location but no to change of CSS location

Carry on through prior post (but don't install jquery as that is part of the HTML5 Boilerplate)

Create a home controller script

Delete the /public/index.html and the app/views/layouts/application.html.erb files

Set the root in the config/routes.rb

Fix the annoying Rails 3.0.5 bug by amending the javascript expansions line in config/application.rb to

The app should now run locally using hml5-boilerplate, compass, and haml.

Heroku

But not on Heroku, to run on Heroku the css files need to be written to a tmp directory as that is the only folder the app can write to.

In config/compass.rb change the css_dir line to

Change config/initializers/compass.rb to

This should allow the app to run locally and hosted on Heroku.

To push to Heroku follow these instructions.

In summary, once you have your SSH keys set up: