grunt-twbs


2014-12 Active

Grunt-Twbs is a grunt plugin I created to make my life easier when it came to creating customised versions of Twitter Bootstrap. Initially I had a method which involved taking chucks out of Bootstrap's Gruntfile.js and gluing it together within my own Gruntfile.js. This felt wrong. With Grunt-Twbs, I decided it was best to use Bootstrap's own build process as is.

Prep

You'll need to prepare a little for the use of this plugin.

  • Grab the source of Twitter Bootstrap via Bower or the official site.
  • Take a copy of Bootstrap's less/bootstrap.less file, put it within your project folder but outside of the Bootstrap location.
  • Install grunt and grunt-twbs.

How grunt-twbs works

  • Original less/bootstrap.less is backed up.
  • Your custom .less file is copied into Bootstrap's source directory.
  • Bootstrap has it's modules installed (if needed).
  • Bootstrap's Gruntfile.js is executed to build the custom CSS file.
  • Optional: The resulting bootstrap.min.css file is copied to a destination of your choice.

This allows you to keep the original Bootstrap code clean of modifications (that you would like to keep) and you don't have to keep track of any changes to their build process. If you're using bower, you also get the advantage of easily switching or upgrading the version of Bootstrap you're using. Keeping in mind that you'll still need to keep track of changes made to the original bootstrap.less file, between Bootstrap versions.

GitHub NPM

npm install --save-dev grunt grunt-twbs