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.
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
The app should now run locally using hml5-boilerplate, compass, and haml.
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: