Compass HTML5 Starter

HTML5 Starter is a Compass extension based on HTML5 Boilerplate by Paul Irish. You can use it to kick-start a fully compliant HTML5 applications. Generating a set of starter files for your HTML5 projects with integrated Sass (Scss) templates.

Browse html5boilerplate.com for the full workup.

Installation

gem install html5-starter

Starting a project

compass create my_project -r html5-starter -u html5-starter --javascripts-dir js --css-dir css --images-dir img --sass-dir sass

The --javascripts-dir, --css-dir, --images-dir and --sass-dir flags are required to keep consistent with the original HTML5 Starter project layout. If you omit them, be sure to edit your javascript and style tags accordingly in index.html.

Run compass watch my_project and the SCSS files will automatically get compiled to your Sass compilation directory whenever a change is made:

css/style.css
css/handheld.css

To see the complete list of files generated by this extension, see the HTML5 Starter project repo.

Integrating with Blueprint

If you're planning to use the Blueprint extension from Compass, you should remove the reset and font styles (see: line 19 and 20) and the print styles (see: line 99) imports inside the style.scss file. Blueprint already includes a print, reset and some basic typographic styles.