Bootstrap Sass with rem instead of px for Vertical Typographical Rhythm

• Bill Hunt

A huge number of sites use Bootstrap as a css framework these days. Using Bootstrap is even easier with the bootstrap-sass package, which uses SASS to allow developers to customize nearly every aspect of the framework. Unfortunately, the current version doesn’t support units other than pixels (px), so using percent, ems, or rems isn’t easy. It also is rather hard to establish a vertical grid for typography rhythm aside from the default, since so many values are hardcoded.

To solve this, I’ve created a boilerplate that overrides the problematic aspects of bootstrap-sass to allow the easy use of rems as well as setting up a solid vertical rhythm. We’re using this right now on our redesigned Madison project!

This package also includes some extra features (that are entirely optional!) such as Compass, Breakpoint, and Sass Web Fonts for loading Google Fonts. I’ve also replaced the default Glyphicons pack that Bootstrap sports with a full Font Awesome install, for lots of icon-goodness!

Go fork and use it now!


Screen Shot 2015-05-26 at 3.13.30 PM