This is a short post just to cover a little grunt plugin I create called grunt-twbs. It's designed to help you with the process of creating customised versions of Twitter Bootstrap.

The need

Whenever I've played around with Twitter Bootstrap, I end up altering its less/bootstrap.less file and then building my custom version using Grunt to execute its own Gruntfile.js. While this is fine, it means you've got a separate Gruntfile.js hanging around and your modifications are made within the Bootstrap source, so you have to backup your changes before upgrading Bootstrap.

My second approach was to tear out chunks of Bootstrap's Gruntfile.js, alter them to work with a .less file located outside of the Bootstrap directory and place those chunks within my main Gruntfile.js. I covered this in a previous blog post and while it keeps the Bootstrap free of modifications (for easier upgrading), it doesn't get around the fact that we have to keep in line with any changes to Bootstrap's Gruntfile.js for building the CSS.

The new idea

Execute Bootstrap's Gruntfile.js from my main projects Gruntfile.js. This seemed to make the most sense as I don'thave to worry about changes to the build process between versions and I can use Grunt to copy across my custom .less file. Upgrading will also be painless as there's nothing vital held within the Bootstrap directory.

My solution grunt-twbs

I wrapped my idea up as a Grunt plugin and figured I'd share (I'm good like that). It's still early days, so I may eventually add some more functionality to it or even find better ways to achieve my goal. As the plugin currently stands, it'll do the following:

• Support building a single or multiple Bootstrap CSS files, based on your custom .less file.
• Your custom .less file should be based on Bootstrap's less/bootstrap.less file (obviously with your own modifications).
• The plugin will also copy the resulting dist/css/bootstrap.min.css to a directory and filename of your choice.
• Bootstrap can be easily upgraded by replacing your copy of the source or using Bower.

GitHub NPM My Project page

Feedback welcome

If you've any ideas for additional features (like building Bootstrap's JavaScript as well) or other suggestions, feel free to head over to the GitHub page linked above and log an issue.