opengovfoundationopengovfoundation
25

Bootstrap Sass Rem Boilerplate

screenshot of Bootstrap Sass Rem Boilerplate

Boilerplate setup of SASS Bootstrap + Compass using `rem` as the base unit instead of `px`.

Github

Overview

The bootstrap-sass-rem-boilerplate is an innovative setup designed for developers who want to harness the power of SASS with Bootstrap while adopting a more flexible unit like rems instead of the traditional pixels. This boilerplate offers a streamlined approach to setting up a workflow for responsive web design, making it easier to maintain consistent typography across different devices with a focus on vertical rhythm. While it caters to newer frameworks, it also provides a unique twist on the established Bootstrap framework by allowing for simple adjustments without altering the core Bootstrap files.

With Bootstrap 4 Alpha now available, transitioning to this boilerplate is both complementary and practical. It offers modern tools and libraries that enhance the development experience, creating a robust foundation on which to build responsive, stylish, and functional websites.

Features

  • Responsive Typography: Sensible defaults added for vertical rhythm ensure a visually appealing layout that works seamlessly with Bootstrap's grid system.

  • SASS Integration: Built using SASS and Compass, making it easy to customize styles and incorporate advanced CSS features.

  • Flexibility with Units: Although rem is the base unit, it can easily be adapted to use em units depending on the project requirements.

  • Easy Updates: Instead of editing original Bootstrap files, the boilerplate overrides or replaces them, simplifying updates when new versions of Bootstrap are released.

  • Additional Libraries: Comes with optional tools including Compass for mixins, Sass Web Fonts for Google Fonts integration, Breakpoint for custom breakpoints, and Font Awesome for enhanced icon options.

  • Custom Configuration: Global and Bootstrap-specific variables are easily accessible for efficient adjustments, making customization straightforward.

  • Improved Workflow: With bower install and Compass commands, developers can quickly set up their environment and ensure continuous integration of changes.

  • Helpful Utilities: Features libraries to address Bootstrap's existing limitations on vertical rhythm and a pixel-to-em conversion helper to aid in using flexible units effectively.