An HTML5 Boilerplate Extension for Compass
Install using gem:
gem install compass-h5bp
Or, if you're using Bundler, you can install it via
bundle installafter placing the following line in your Gemfile:
First, you must add the plugin to your
config.rb (your Compass configuration file). This can be done be placing an
import line at the top of the file and is required to add the Compass plugin to the Sass load paths:
Inside your SCSS (or Sass) file, you must import the
h5bp compass library before you can use any of the mixins:
Include the h5bp mixin:
Optional: Redefine the mixin
h5bp-customto declare custom modifications to the HTML5 Boilerplate styles.
To selectively import only certain elements, observe the following order. This ensures your custom modifications to the HTML Boilerplate styles will work as expected, by following the outline provided in the upstream HTML5 Boilerplate CSS.
Include the mixins that make up the Normalize portion of the HTML5 Boilerplate styles. You can include all of Normalize at once:
Or pull in only the portions of Normalize you want:
@include normalize-base; @include normalize-display; @include normalize-links; @include normalize-semantics; @include normalize-embedded; @include normalize-grouping; @include normalize-forms; @include normalize-tables;
Include the opinionated default base styles:
You can include the styling for the browser upgrade warning:
Provide styling to the 404 page (requires that you specify the class
errorpagefor the html of the 404 document):
Define your custom modifications to the HTML5 Boilerplate styles here.
Let h5bp define some semantic helper classes. (e.g.
There are also specific mixins provided in
h5bp-helpersyou can call instead.
Include h5bp's predefined print style media query:
If you're coming from a previous version, be aware that several mixins have had their name changed, and any mixin or feature that had been marked for deprecation has been removed. That being said, migration should be relatively simple.
The order for the "Advanced Implementation" matters. It's important to note that "custom modifications to the HTML5 Boilerplate styles" means only that - the rest of your SCSS goes below everything listed.
HTML5 Boilerplate, created by by Paul Irish and Divya Manian.