Introduction
The process of converting the graphical design of a web page to HTML and CSS have always been a big challenge when every single Web Browser out there, renders your design the way it understands and that's not the way you designed it.
Fortunately, recently, some of the experienced web designers around the world, started some projects known as web front-end frameworks which help web developers focus on their design instead of testing their page across different browsers fixing the browser comparability problems.
"Twitter Bootstrap" is one of the popular frameworks on the web that has been created by Mark Otto and Jacob Thornton, Twitter developers.
(Many thanks to them.)
The usage documents on the Bootstrap website are really complete (Getting Started - Bootstrap), plus many other articles all around the web, explaining how to use the Bootstrap's grid systems and components, but this framework has a default graphical design and although the design is so nice and beautiful, that's not fun to repeat the same design across all the websites that use Bootstrap as the layout framework.
So, I decided to write this article and explain how to customize the Bootstrap framework to fit your own styles and design.
Here we go...
Requirements
Important: To complete this tutorial, use must have basic knowledge of the Less language.
First, download the Bootstrap bundle from the Github website here: https://github.com/twitter/bootstrap.
Then, you need a web-browser equipped with "Developer Tools", ideally a "WebKit Browser". I'm using "Apple's Safari Browser" that is my favorite one. You can download "Google Chrome Browser" here: https://www.google.com/intl/en/chrome/browser/.
Also, you need a "Text Editor" of your choice ideally with "HTML" and "Less" highlighting (I used Sublime Text 2) and a way to compile your less files, which is explained on Less official website.
(I will use Less.app.)
Setup the File Structure
Extract the ZIP file you downloaded earlier from Bootstrap's Github page and take a look inside the extracted folder.
The tree "less", "js" and "img" folders are the main folders for every Bootstrap web design.
Inside the less folder, less files are localed that together will form the bootstrap CSS framework.
If you look carefully, you will find a "test" folder located inside the less folder.
This folder includes some HTML files that are some simple bootstrap layouts. These could be used for customization purposes, but I will create my own test page, including the main components that I will customize.
I created a simple bootstrap layout, combining some components from the test files explained above.
My page is made up of two "navbar"s, "hero-unit", "button"s, "dropdown" and "dropup" menus.
As I mentioned earlier, bootstrap is a framework and everyone knows that it is not a good practice to change the main framework files to customize it. Why?
Because, first, this framework may get updates from time to time and that way, you will need to do the customization to the new version again!
Also, that way, you may mess up the frameworks files and the framework may not work the proper way again!
So because of the reasons explained above, I have created a folder structure that will hold the bootstrap original folder and files inside a folder named after the framework (excluding the "test" folders from "less" and "js" folders), a less folder to hold my own less files that I will explain later, an img folder for future images that I will add to my pages and finally a js folder that will hold the 3rd party JavaScript libraries and possibly my own JavaScript files.
Then, I placed my index.html file close to these folders.
The next step is to add my own less files that override and customize the main framework to my own less folder.
Bootstrap includes two main files that if overridden, almost the whole framework will be overridden and customized.
These files are "variables.less" and "bootstrap.less".
I created a "custom-variables.less" and a "custom-bootstrap.less" files to override equivalent original files and additionally a "my-bootstrap-theme.less" to include additional custom less code and compile the whole setup into a single CSS file named "my-bootstrap-theme.css".
I made an exact copy of the "variables.less" and "bootstrap.less" files inside my own custom files and changed the files urls inside my custom bootstrap.less to correspond to the framework files inside the bootstrap folder and changed the "variables.less" file url to correspond to my own "custom-variables.less" file so the compiling file will include the framework with my customizations.
In the next step, I extracted the default bootstrap colors and used "ColorSchemer Studio" to spin the colors and make them a little warmer.
I also made the gray family colors a little warmer so the white and black are not absolute white and black.
(Any other colors could be added and used in the file, there are no limits.)
So I replaced the colors inside custom-variables.less file with new colors.
And I also changed the body background and body text colors.
Before I get further, we need a real-time style update corresponding to our changes in less files.
To do so, I downloaded the "less.js" file from Less official website.
And I followed the instruction on the page to setup my bootstrap page for live preview.
Important: Because of the fact that less.js library loads the .less files using Ajax, and most of the modern browsers do not allow cross-domain Ajax file access, you need to run a simple HTML server on your workstation and view your page on http://localhost/ sub-urls for Ajax requests to be valid and less.js would be able to render your .less files at real-time.
(For this article, I used Mac OS X's WebSharing option that is a simple Apache server setup.)
As you can see in the picture above, I included both original bootstrap.less file and my own my-bootstrap-theme.less files so we can switch back to the original framework and see the difference.
Here we go, when we access the web server address, our page would be rendered using less.js and we can see the actual appearance of our layout.
Inside the my-bootstrap-theme.less file, I imported the custom-bootstrap.less file that by itself imports the custom-bootstrap.less.
So I switch the .less file inside my HTML file by commenting the original file and uncommenting the my-bootstrap-theme.less and start dealing with variables inside the custom-variables.less file.
But before getting into customization, here is a small trick that will make your life easier.
Normally, you have to reload the page to see the changes you have made and saved inside your less files but the less.js library introduces a feature that cuts the need of reloading the page:
Append the #!watch query to the end of the url to your page, reloads the page with new query string and that's it. No more need for reloads.
Here, I have made a change inside the custom-variables.less file to the hero-unit class and after I saved the file, my page updated automatically to show the changes.
Changing the colors inside the less file is easy and you can use the less built-in functions to tune the color and then see the result by auto update feature of less.js. But there are times that you need a more straight and quick way of testing the CSS values, and that's the time when the "Developer Tools" come to scene.
I want to adjust the corner radius of the buttons and I want to play with the value and see the instant update to the buttons.
Right-click on the element of your choice and select "Inspect Element" and "Developer Tools" appear including a panel, manipulating the HTML element tags on the left and another panel showing the CSS rules and values on the right that allows you to change the CSS value and see the instant update to the element in the browser window.
Here, I am changing the corner size value and I can see the result in the browser window.
Using Our Knowledge
I have changed the buttons' borders and background color (including the gradient), body background and text colors, hero-unit background color, navbars' regular and inverse colors and some other changes to the variables inside the custom-variables.less file and our custom bootstrap theme is almost ready.
Let's do the final steps.
Final Steps
Finally, I wanted to adjust some values that are not located inside the variables.less file.
Some of the components including the dropdown menus, have less styling that are located inside the direct component files, and because of that, they could not be overridden from inside the variables.less file. In such situations, there are two solutions to do our adjustments.
First and not preferred one (by me) is to create a less file like custom-dropdown.less and use the classes inside the original file to override the changes. But that makes you create too many files.
The second solution is to copy the corresponding class from the original file and insert it into a single file (that I have already created and named it my-bootstrap-theme.less) and set the styling and if needed, create separate sections using comments to be able to find them easily.
And that's exactly the way I did it.
And here is my final my-bootstrap-theme.less file.
So our customization less files are ready and we can compile the final .css file.
There are some ways to do this process out there but I preferred a ready to use tool and I chose "Less.app" application and just compiled the "my-bootstrap-theme.less" file into "my-bootstrap-theme.css" file.
Finally, I updated the index.html to link the recently generated .css file and commented out the less files and less.js references so my page only stands on pure CSS.
And here is our new bootstrap theme fully functional and customized.
Hope you enjoyed it and we will see many new bootstrap themes around soon.
