Recently our team evaluated front end frameworks in an effort to accelerate our theming process. Our goal is to rev up our ability to create responsive layouts quickly without maintaining custom HTML elements and CSS.

Bootstrap 3 and Foundation 5 were at the top of our list. At the end of a lengthy discussion, we decided to use Bootstrap 3. Under Drupal 7, Bootstrap is more stable than Foundation. But Bootstrap isn’t perfect out of the box. Our wish list included Sass and GruntJS integration.

Here’s how we tuned our front end frameworks and process to play nicely together.

We needed Sass, not Less.

Our team uses the Sass CSS extension language to speed production, but the latest release of the Drupal 7 Bootstrap theme ships with Less. Thanks to the Bootstrap-Sass project, we can swap out Less for Sass.

Here’s a copy of the Drupal Bootstrap 3.0.2 sub theme with Sass included. Simply download, install, and enable it just like any other Drupal theme. Note that you still need to install the Drupal 7 Bootstrap theme first.

Add GruntJS

Besides Sass, our preconfigured Bootstrap with Sass sub-theme also contains a GruntJS configuration file.

GruntJS allows us to compile Sass files, detect Javascript errors, and integrate LiveReload in development to reduce repetitive tasks like refreshing your browser when modifying stylesheets.

Here are the steps to help you set up the development environment, based on our preconfigured Bootstrap with Sass sub-theme.

Setting it all up

1. Upgrade jQuery to 1.7. Be sure to update your version of jQuery. The jQuery Update module makes this easy.

2. Extract our Bootstrap Drupal theme with Sass into your Drupal theme folder, which is under

sites/all/themes/

3. Install GruntJS, NodeJS, and needed packages. Change the directory to

sites/all/themes/bootstrap_subtheme

and install and activate these packages with the following commands, assuming you are using Debian-like package manager: To install NodeJS, enter:

- sudo apt-get install nodejs
- sudo apt-get install npm
- sudo ln -s /usr/bin/nodejs /usr/bin/node

To watch your files, enter:

- sudo npm install -g grunt-cli
- sudo npm install grunt-contrib-watch --save-dev

To jshint your javascript, enter:

- sudo npm install grunt-contrib-jshint --save-dev

For JS minification using uglify, enter:

- sudo npm install grunt-contrib-uglify --save-dev

To concat js files, enter:

- sudo npm install grunt-contrib-concat --save-dev

To compile your Sass files, enter:

- sudo npm install grunt-contrib-sass --save-dev

Note that NodeJS is required for npm to manage packages for Grunt. You don't need to understand NodeJS. In fact you don't need to know Grunt either, since the bootstrap_subtheme already ships with the needed configuration file.

4. Install And Enable the LiveReload Module. Add this module to your Drupal install to enable LiveReload. If you’ve not used this before, you’re going to love it.

5. Fire up GruntJS In the

sites/all/themes/bootstrap_subtheme

directory, enter

grunt watch

6. Start writing Sass to Customize Bootstrap Here is the development workflow guided by the Gruntfile.js, which you can still customize to fit your team.

sites/all/themes/bootstrap_subtheme/css/sass/style.scss

is where you include the Bootstrap Sass markup. You can overwrite variables, craft your own mixins, and create site-specific styles to your heart’s content.

sites/all/themes/bootstrap_subtheme/css/style.css

is the destination of your GruntJS Sass file.

sites/all/themes/bootstrap_subtheme/bootstrap_subtheme.info

is where you configure your Drupal theme to include the compiled style.css file.

7. Now, test LiveReload. If all is set correctly, every time you modify your style.scss and pass GruntJS validation, your browser will reload for you to reflect the changes. If you need to add the latest Sass files for the bootstrap_subtheme module, go to the Bootstrap-Sass project to download and place the stylesheets in the directory

sites/all/themes/bootstrap_subtheme/bootstrap-sass

8. At last, you might want to modify your .gitignore to ignore a few things:

sites/all/themes/bootstrap_subtheme/node_modules/*
sites/all/themes/bootstrap_subtheme/\.sass-cache/*
sites/all/themes/bootstrap_subtheme/css/*.map

That's it!

In the future, I hope the Drupal 7 Bootstrap theme will ship with a Sass version or incorporate Drush commands to do everything here, but until that happens, follow this guide for Bootstrap, Sass, and Grunt in Drupal 7.