bootstrap-sass-rem-boilerplate

⚠️ Bootstrap 4 Alpha is now out, and you should probably be using that instead! It very nicely handles rems and ems, though it does not support IE8.

Boilerplate setup of SASS Bootstrap + Compass using rem as the base unit instead of px. This also has sensible defaults added to give a strong vertical rhythm to your typography, to go nicely with Bootstrap's grid. This can be adapted for use with em instead of rem.

Rather than editing the original Bootstrap files, we've overridden or replaced them entirely, so updating Bootstrap should be easy.

Included libraries

In addition to the basic boilerplate, we've added a few optional things you should feel free to remove:

• Compass - extra mixins and tools for Sass.
• Sass Web Fonts - font loader for Google Fonts.
• Breakpoint - breakpoints for Sass.
• Font Awesome - replaces the default Glypicons from Bootstrap with extra icons.

This package is built with the following tools:

• Bower
• Sass
• Bootstrap (specifically, bootstrap-sass)
• Gridlover - used to generate our baseline vertical rhythm.

Installation

0. Install bower, sass, and compass.
1. Run bower install
2. Build the css with compass compile, or watch for local changes and continuously re-build with compass watch.

Usage

Here are the basic files you'll want to modify:

• The main loader file is ./sass/style.scss. Add links to your style files here.
• Global variables for the system are in ./sass/config/_settings.scss.
• The bootstrap-specific variables are kept in ./sass/config/_bootstrap-settings.scss.
• There's a duplicate of the base bootstrap variable files, setup for use with rem in ./sass/mixins/_bootstrap-variables.scss
• The replacement for the default bootstrap loader file in ./sass/mixins/_bootstrap-minimal.scss - you should comment out packages you're not using from this file.

Other things in this package:

• A library to override some of the hardcoded problems bootstrap has for vertical rhythm.
• A helper to convert px to em.
• Bootstrap's default examples ported to work a 2rem line height. These aren't designed to be pixel-perfect, just guidelines for reference.

License

This is a derivative work of Bootstrap, and carries the same MIT license where applicable. The included packages have their own licenses where applicable.