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.
Besides Sass, our preconfigured Bootstrap with Sass sub-theme also contains a GruntJS configuration file.
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
3. Install GruntJS, NodeJS, and needed packages. Change the directory to
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
- 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
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.
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.
is the destination of your GruntJS Sass file.
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
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
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.