Bootstrap Overrides And Mixins With Middleman

When it comes to prototyping for a web application I prefer a static website generator called Middleman.

Middleman is based on ruby and was recently updated to v4.

If your web application relies on Twitters Bootstrap framework integration is not straightforward.

Middleman is based on Sass where Bootstrap is based on Less (v4 will be based on Sass).

There is a Bootstrap Sass port available so this is the gem for Middleman

gem ‘bootstrap-sass’, ‘~> 3.3.6′

Bootstrap requires jquery so put that in the javascripts directory.

In the stylesheets directory edit the sites.css.scss file

// “bootstrap-sprockets” must be imported before “bootstrap” and “bootstrap/variables”
@import “bootstrap-sprockets”;
@import “bootstrap”;

Now you have a working bootstrap environment

But what about customizing? Bootstrap variables and mixins?

Create a stylesheet file bootstrap_and_overrides.scss in the stylesheets directory

Place the overrides in this file like

$body-bg: #f8f8f8;
$text-color: #808080;

Import the file in your sites.css.css

// “bootstrap-sprockets” must be imported before “bootstrap” and “bootstrap/variables”
@import “bootstrap-sprockets”;
// import bootstrap_and_overrides before bootstrap
@import “bootstrap_and_overrides”;
@import “bootstrap”;