Compass Html5 Boilerplate
HTML5 Boilerplate is a Compass extension based on HTML5 Boilerplate by Paul Irish. You can use it to kick-start fully compliant HTML5 applications. Generate either stand-alone HTML5 projects, or Rails applications with fully integrated HTML5 Haml and Sass (Scss) templates.
Browse html5boilerplate.com for the full workup.
gem install html5-boilerplate cd my_rails_project compass init rails -r html5-boilerplate -u html5-boilerplate --force
This will install the following files in your rails project:
--force flag will overwrite any files that may already exist. In most cases this is probably what you want.)
The Scss files above will automatically get compiled to your Sass compilation directory:
Note: If you already have a config/compass.rb file in your project, you may need to manually add the following line to the top:
A few more minor points to store into your brainpan...
If you still have an application.html.erb in your layouts, you will need to loose it now so that Rails will use your shiny new application.html.haml layout instead.
The haml will compile to the equivalent of html5-boilerplate's index.html, but with all comments stripped out, and some additional rails stuff like csrf_meta_tags, flashes and the Rails jQuery driver.
You can set your own Google Analytics Account ID and your Google API Key either as ENV variables, or inside config/google.yml.
This extension has only been tested on Rails3.
Stand Alone Installation
--css-dir flags are to keep consistent with the original project layout.
This will create a
my_project directory containing the following files:
index.html 404.html crossdomain.xml robots.txt apple-touch-icon.png favicon.ico src/style.scss src/handheld.scss src/partials/_base.scss src/partials/_example.scss src/partials/_page.scss js/dd_belatedpng.js js/jquery-1.4.2.min.js js/modernizr-1.6.min.js js/plugins.js js/profiling/charts.swf js/profiling/config.js js/profiling/yahoo-profiling.css js/profiling/yahoo-profiling.min.js .htaccess config.rb nginx.conf mime.types web.config
compass watch my_project and the SCSS files above will automatically
get compiled to your Sass compilation directory whenever a change is made:
HTML5 Boilerplate by Paul Irish
(comments left intact in scss files)
Compass Extension Copyright (c) 2010, Peter Gumeson