Recently, after a long time just overriding the default Bootstrap styles, I felt the need to streamline my processes a bit. The time has come for me to get my hands into compiling Bootstrap myself, from the source code. After reading the brief guide on how it could be done, I grabbed a cup of coffee and got into it.
Download the Source
First one needs to download and unzip the source file from the Bootstrap website and place it somewhere handy. I made a folder under “C:\Users\me\projects\bootstrap-src” on my Windows machine and “/Users/me/projects/bootstrap-src” on my Mac. Inside these folders (one at a time, not simultaneously), I unzipped the Bootstrap source files.
Inside the source files, there are many other files, but we are interested in only a couple of them,at this stage. The folder “dist” is where the compiled bootstrap output will go. Which means, if you compile Bootstrap, the CSS, JS and font output will go into this folder or directory.
Install Node JS
Node JS can be installed several different ways. The easiest and quickest is to go to their website, download and run the installer for your platform. I downloaded these installers and installed node on both my Macbooks and on my Windows desktop computer. If you’re feeling a little braver, you can do a pull request from the nodejs repository on Github and compile it yourself from source.
When node is installed, you need to install grunt-cli package using the Node Package Manager (npm). You should read more about npm switches and its other options here. While not essential right now, it will come in handy when you start to get into developing stuff with node. The command you should type is
npm install -g grunt-cli
This will install the command-line package from Grunt and the -g will make it available globally.
Once you have installed grunt-cli, open either the Command window or Terminal and navigate to the Bootstrap-3.1.1 directory and once there, you need to type
The command npm install will read a file called package.json inside the bootstrap source directory and install all required dependencies listed in the file. This is a nice and automated process so you can take a sip of your coffee while watching the output on your command line window.
Time to Grunt
Once you have installed all the dependencies you can now run Grunt to do the heavy lifting for you. Go to the Bootstrap-3.1.1 directory and just type
and it will compile a fresh-from-the-source-code version of bootstrap for you.
On Mac, I have had some issues completing this process (errors), mainly due to some Ruby components that needs to be installed. I will save you a lot of time and hair-pulling by telling you that if you’re using Mac OS X, you need to install Xcode and especially the Command-Line-Tools first, as this will save a lot of headaches later.
When Xcode and the CLTs have been installed, you can proceed to install a couple of Ruby gems. The first one you will need is Jekyll. This will need to be installed by typing
sudo gem install jekyll
That will hopefully install Jekyll. If you get no errors, you are good to go. Proceed to the next step if you get errors.
If Jekyll install is not successful, you may or may not need to update gem by typing
sudo gem update --system
and wait a few minutes while gem is updated. Once this is done, you can uninstall Jekyll and install it again, using the command in the previous paragraph. To uninstall Jekyll it is the same process as installing it, except you type “uninstall” in the command.
To see if Jekyll has been installed correctly, you may need to type “jekyll” into the command line to see if there is any errors. If you see any errors, you need to install json via gem. This is done by issuing
sudo gem install json
and it will install json for you.
Now you should be good to go with compiling Bootstrap from source. If you get other errors then maybe you need to ask Google, as by this point everything is working as they should on my machines. Good luck, now is the time to visit those LESS files in the “less” folder and play around with the “variables.less” file to get a custom version of Bootstrap.