Bootstrap 3.0.0 RC1 customization

Bootstrap is an HTML, CSS, JavaScript framework that you can use as a basis for creating websites or web applications. It is a well documented tool that simplifies the creation of beautiful form based applications. Especially when you are using Symfony2 and you use MopaBootstrapBundle. When we discussed version 2, we explained how it influences your front-end development cost. Now version 3 is about to be released. MopaBootstrapBundle has already two PR (pull requests) open for supporting Bootstrap 3. If you want to modify the Bootstrap default colors to match your company’s new website layout, this blog provides the instructions. However, make sure you first check out the Bootstrap 2 to 3 migration guide.

1) Download Bootstrap

cd bootstrap

2) Install npm and node (Ubuntu)

curl | sudo sh
sudo ln -s /usr/local/bin/npm /usr/bin/npm
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Or using the package manager (thank you Mischa):

sudo apt-get install python-software-properties python g++ make;
sudo add-apt-repository ppa:chris-lea/node.js;
sudo apt-get update;
sudo apt-get install nodejs;

3) Install grunt-cli globally and grunt locally

sudo npm install -g grunt-cli
npm install grunt
npm install grunt-contrib-connect grunt-contrib-clean grunt-contrib-concat grunt-contrib-jshint
npm install grunt-contrib-uglify grunt-contrib-qunit grunt-contrib-watch grunt-recess

4) We need Jekyll as well..

sudo apt-get install rubygems
sudo gem install jekyll

5) Now do the actual modification

Now edit the files in the “less” directory (start with “variables.less”) with you favorite editor. Note that less is some sort of programming language that allows you to script consistent CSS generation. One of the examples is that Bootstrap has a “brand-primary” color that can be used in different shades using the “lighten” and “darken” functions.

6) Test your creation

grunt dist
jekyll serve

Questions? Comments? Let us know!