grunt-twbs Custom Twitter Bootstrap
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
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.
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
- Your custom
.lessfile should be based on Bootstrap's
less/bootstrap.lessfile (obviously with your own modifications).
- The plugin will also copy the resulting
dist/css/bootstrap.min.cssto a directory and filename of your choice.
- Bootstrap can be easily upgraded by replacing your copy of the source or using Bower.