CODEWITHSUNDEEP
csstwitter-bootstrapgruntjslessbower
smeeb
smeeb

Reputation: 29567

Grunt, Bower and Bootstrap 3

My understanding is that Bootstrap 3 is compiled using LESS. Meaning, if I want to customize Bootstrap's theming/look-and-feel, I would modify the variables in the various LESS files, and then compile my custom Bootstrap lib.

My understanding is that Grunt is a build system for JavaScript, that does things like minification, uglification, etc.; and that it has a pluggable architecture for defining custom behaviour.

My understanding is that Bower is a dependency management tool that can run standalone (from the shell) or as a Grunt plugin.

If anything I have said so far is not true or is mislead, please begin by correcting me!

Assuming I'm more or less correct with my understanding, then my question is:

How could I use LESS, Grunt and Bower together for creating a customized Bootstrap-based app? Would I use LESS for the custom Bootstrap, then use Bower to pull that custom Boostrap into my app as a dependency, and then use Grunt to compile/minify my app's JS/CSS resources? Or am I way off track and completely off-base here?

Upvotes: 2

Views: 1053

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

I think you are right.

Start by downloading Bootstrap's master.zip, also make sure you have installed Node.js and npm.

Than run:

  1. npm install
  2. grunt dist (which recompiles Boostrap, CSS and Javascript)

Now you can inspect Bootstrap's Gruntfile and find out how to configure the Grunt task to build and extend Bootstrap.

Bootstrap does not use Bower for front-end package management (although you can install Bootstrap with bower too), but the Roots Wordpress theme does use Bower:

Roots uses Bower for managing Bootstrap, jQuery, Modernizr, and Respond.js.

You can install any package with bower install --save <package-name>

Bower uses the .bowerrc file to install these packages.

Upvotes: 1

Related Questions