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. Setup your Rails applications with with fully integrated Haml and Sass/Scss templates that implement Boilerplate’s functionality, or generate stand-alone Html5 Compass projects.
Browse html5boilerplate.com for the full workup.
(In addition to Html5 Boilerplate itself)
- Html5 Boilerplate stylesheets implemented as a modularized Compass library
- Lets you pick and choose only the Boilerplate mixins and includes you want
- Choose either erb or haml templates
- Generates sass/scss partials to keep your stylesheets organized
- Generates modularized haml layouts for Rails apps (header, footer, flashes, etc.)
- Rails helpers to cleanly hide a little of Boilerplate’s html complexity
- Loads minified jQuery in production envs, but uncompressed version in development
- Rails jquery-ujs driver installed and loaded along with jQuery and Modernizr
- Setting API Key in google.yml will auto-load jquery from google (async)
- Setting Analytics ID in google.yml will auto-load google analytics (async)
- Falls back to native Compass for stuff like clearfix and image replacement
- Fully commented source, but the haml/sass output remains comment free
- Not tested on animals
First, make sure the following gems are in your Gemfile
gem "compass" gem "haml" gem "html5-boilerplate"
If you want to use erb as the template engine set an environment variable called ‘TEMPLATE_ENGINE’
.e.g. declare -x TEMPLATE_ENGINE=“erb”
Not specifying an engine or anything other than “erb” it will fallback to using Haml
Then run the following
bundle install compass init rails -r html5-boilerplate -u html5-boilerplate --force
--force flag will overwrite any files that may already exist. In most cases this is probably what you want.)
(For a new project, I answer “Yes” to keep my stylesheets in app/stylesheets, but “No” for compiling them into public/stylesheets/compiled.)
If you’re using Haml you’ll probably want to remove your application.html.erb so that Haml can do its thing
mv app/views/layouts/application.html.erb app/views/layouts/application.html.old
Start your Rails server, and you’re done!
Here’s a list of the files that compass init installed in your Rails project:
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 points…
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-ujs driver.
You can set your own Google Analytics Account ID and your Google API Key either as ENV variables, or inside config/google.yml. (see that file)
This extension has only been tested on Rails3.
Stand Alone Installation
Use this if you’re not using Rails, but still want compass and the html5-boilerplate sass libraries, It will create a simplified index.html (with haml source), but without the nice Rails helpers.
--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 index.html.haml 404.html crossdomain.xml robots.txt humans.txt apple-touch-icon.png favicon.ico src/style.scss src/partials/_base.scss src/partials/_overrides.scss src/partials/_page.scss src/partials/_fonts.scss src/partials/_media.scss js/jquery.min.js js/modernizr.min.js js/plugins.js .htaccess config.rb
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 © 2010-2011, Peter Gumeson