How to create an awesome blog template using Bootstrap 3 - Part II
Table of Contents
- 1. Introduction
- 2. Part II - Customize Bootstrap to create themes for our brand
- 3. Approaches to customize Bootstrap theme
- 4. Tools Needed
- 5. Download Bootstrap source-code and install plugins
- 6. Quick look into LESS
- 7. Exploring Bootstrap folders, especially the one named "less"
- 8. Setting up the project
- 9. Customizing Typography
- 10. Customizing Colour Scheme
- 11. Customizing Components
- 12. Customize miscellaneous parameters like gradients and shadows
- 13. Summary
- 14. References
- 15. Revision History
1. Introduction
Hi folks, I hope it didn't take too long to publish this second part. I was quite busy with a mobile app that came on the way (still working on it) that delayed things little. Thanks for everyone who showed interest in this tutorial. Do you know, your comments are the food for my "How to" tutorials. Please post your questions, ideas and appreciations as comments.
In the previous part, we saw how to create a decent blog template quickly using Bootstrap 3. If you haven't read it, I would encourage reading, though, it's not a necessity for reading this part. To follow this article, all you need is some basic knowledge in HTML and CSS. It would be great if you've some little knowledge on the CSS pre-processor language LESS.
If you've read part 1, I believe you should've already gained the knowledge to craft templates for any website using Bootstrap. But the fact is, all the created Bootstrap templates bear the same look and feel provided by the framework as default. The default theme provided by Bootstrap is good for wikis but not for an e-commerce website that sell top-notch products. Look does matters! It's very important that you should customize the theme to reflect your brand.
After reading this part, I'm sure you'll gain enough knowledge to decorate any Bootstrap template. You should also get a glimpse of the CSS pre-processor LESS and the immense benefits it brings to the stage. I would be happier if you learn the trade to create and sell dozens of website templates in a short time with less work and little creativity.
Alright, let's beautify our template!
2. Part II - Customize Bootstrap to create themes for our brand
This is how our blog template will be going to look after little make-up. Do you like it?
Fig 1. Bootstrap blog template
3. Approaches to customize Bootstrap theme
3.1 Web Page Theme
A theme refers to the design of the web page. It's a way to coordinate all the elements that go into making the web page so that they complement one another and reinforce the site's subject matter. When a web page theme works well, it presents a pleasing aesthetic to the viewer, keeps his interest and gives him a clear impression about the website's contents - stolen from here
The two very important elements that influence a website's theme are: typography and colour scheme. By changing these two elements we can create numerous web designs. In this workshop, we are going to create a custom theme by primarily customizing these two things.
The default theme provided by Bootstrap uses "Helvetica Neue" font face and white-gray colour scheme. We can customize the default theme of bootstrap through different ways.
- Overriding Bootstrap CSS styles
- Using Bootstrap's online download builder
- Using third-party tools like bootstrapthemeroller, bootswatchr
- Modifying LESS variables
3.2 Overriding Bootstrap CSS styles
This approach is very common. In this approach, we'll duplicate the Bootstrap CSS rules in our custom stylesheet, where we add new styles to it or override the existing ones. The custom stylesheet should be referenced below the bootstrap stylesheet.
For ex, Bootstrap applies the following style to the heading for a default panel.
.panel-default > .panel-heading
{
color: #333; /*dark gray*/
background-color: #f5f5f5; /*light gray*/
border-color: #ddd; /*gray*/
}
Listing 1. Default style of panel
We can override the colours of the default panel by duplicating the selector and changing the values of properties in our custom stylesheet.
.panel-default > .panel-heading
{
color: #fff; /*white*/
background-color: #c43e3e; /*red*/
border-color: #872525; /*dark red*/
}
Listing 2. Overridding panel style in custom stylesheet
This approach works well when the customization required for your website is little. When it requires more, then the stylesheet soon will become bloated with lot of rules exposing threat to maintenance (I really hate to see "!important" everywhere). Not only that, the worst part is, you are increasing the load of the page which makes performance suck.
3.3 Using Bootstrap's online download builder
Bootstrap provides an online download builder where you can customize the styles by easily changing a set of LESS variables (don't worry about LESS now I've a section dedicated for it) which will be finally compiled into couple of CSS files: bootstrap.css and bootstrap.theme.css. Not only that, the customization page also helps you to choose only the required components and plugins for your website; which will help to reduce the size of the generated CSS and JavaScript files.
This approach is not good when you've to frequently change the customization parameters. Every time you exclude a JavaScript plugin or modified couple of LESS variables you've to visit the customization page and start everything all over again. This approach is not productive for websites that needs to customize the look and feel, because in this case, we've to modify things frequently.
3.4 Using third-party tools like bootstrapthemeroller, bootswatchr
There are many online tools available that helps you to quickly wrap up nice themes. Couple of them I found on net are: bootstrapthemeroller and bootswatchr. There are many others too. Some are free and some are paid. Unlike Bootstrap's customization page, these tools provide side-by-side preview when you modify things which is very useful.
We are not going to this approach for many reasons. The main thing is, I want to teach you how you can do all this without using any tool.
3.5 Modifying LESS variables
Bootstrap is built on dozens of LESS files containing hundreds of variables which controls structure and style of all components. By modifying these variables you can bend Bootstrap as you wish. In this approach, we'll download the complete source code and update the required LESS variables manually. Finally, the modified LESS files are compiled into CSS which we'll be referencing from the html files.
This approach works well in most of the cases where you want to create a unique theme for your website. We are going to use this approach in our workshop.
4. Tools Needed
We need a text editor, LESS compiler, CSS minifier and any latest browser. I may recommend Firefox because of the add-ons like FireBug, ColourZilla which will help you very much in customization. In the previous part, I've suggested to use Sublime Text for editing html, CSS files. You can also download Sublime Text 3 which is still in beta at the time of writing this. Lot of new features can be added to Sublime Text through plugins. Without surprise, there are also plugins available for editing and compiling LESS files. The cool thing is, these plugins also minify the compiled CSS files.
There are other nice tools available for editing and compiling LESS and one of the popular one I used initially is Crunch. You cannot edit html files with Crunch and also it needs Adobe Air. Bootstrap uses Grunt for compiling CSS and JavaScript. If you are little familiar with node you can try that, for more information refer this page.
I realised a bit of inconvenience in using two tools: one for editing html, CSS and other for LESS. So I decided to go with one - Sublime Text.
The following are the tools I've used to complete this part.
- Sublime Text 2
- Firefox/Chrome
Feel free to explore and employ different tools. Don't forget to share that experience with me.
5. Download Bootstrap source-code and install plugins
In this section, we'll download the necessary libraries and tools. We've to download the Bootstrap source-code which contains the core LESS files that needs to be edited and compiled (we are not really going to modify them). We also need to download and configure couple of LESS plugins for Sublime Text.
Let's split the complete work into following tasks.
- Download Bootstrap source-code
- Download and configure LESS plugins for Sublime Text
- Setup the custom bootstrap folder
5.1 Download Bootstrap source-code
You can download the complete Bootstrap source-code from Git. Drop the downloaded zip file under the "lib" folder of our project and extract right there.
Fig 2. Extracting bootstrap source-code zip in "lib"
When I was working on the first part the latest version of Bootstrap was 3.0.3 and now it's 3.1.1. There are no any breaking changes happened and we are good to upgrade.
5.2 Download and configure LESS plugins for Sublime Text
This is a little complicated task. I request you to follow the steps carefully. To install plugins for Sublime Text easily, I recommend you to install Package Control, which is a plugin by the way. Install Package Control as per the instructions specified in this page. Once you installed you need to restart Sublime Text. If your installation went fine, you can open the Package Control widow from the Preferences menu.
Fig 3. Opening Package Control from Preferences
To work with LESS, we need to install two more plugins: sublime-less2css and LESS-sublime.
5.2.1 Install sublime-less2css
This plugin is used to run the compiler whenever you need to compile LESS to CSS. Let's install this plugin.
Open the Package Control from Preference menu.
Fig 4. Package Control
Select the "Install Package" option.
Fig 5. Install Package
After you selected the option, if you've a slow network... you may feel nothing is happening. But in the background, Package Control queries for all the packages, you can notice a simple progress message is displayed at the bottom status bar (Sublime Text really should improve in showing progress!). I was fooled many times thinking what the heck is going on? You've to wait with patience still the Package Control list down all the available packages.
Fig 6. Progress message in status bar
Fig 7. Packages list
Type "less" in the textbox and select the package with the name "Less2Css". Wait till the package get downloaded and installed, then restart Sublime Text. If everything goes fine you can see a new option "Less > Css" under Tools menu.
Remember I told you earlier this plugin runs a "compiler" when you need to compile LESS files. This compiler has to be installed separately. Without the compiler the plugin is futile! If you are using Windows machine, you've to download the compiler from here.
Download the latest zip and extract it anywhere you want. I've extracted the contents under C:\lessc\.
Fig 8. LESS compiler
Next, to invoke the compiler from anywhere, you need to update the system environment variables. Append "C:\lessc\" to the value of Path variable after a semicolon.
Fig 9. Editing system variables
To make sure you've done everything right, open the command prompt and type lessc -v. On enter, you should see the version no. of the compiler displayed in the console.
Fig 10. Testing compiler from command prompt
Restart Sublime Text. Now you are good to run compiler right from it. We've to do some configuration for this plugin before using it which we'll see in the "Setting up the project" section. If you've any problems in doing all these stuff please refer this link or post a comment.
5.2.2 Install LESS-sublime
This is just a syntax highlighter for LESS. Not mandatory though! Search the package with the name LESS and install it. Don't forget to restart Sublime Text after your installation to put the plugin in action.
Alright, now we've a single editor to work with all the files in this project. Let's spend some time on learning the basics of the LESS before dive into work.
6. Quick look into LESS
6.1 What is LESS? Why we need it anyway?
6.1.1 CSS Pre-processors and LESS
LESS is a CSS pre-processor. Well, what is a CSS pre-processor? To answer this question, I should tell you first some of the shortcomings of CSS. The fact is, CSS is old! Though CSS3 brings many advanced features but the language hasn't improved enough. Compared to other programming languages, CSS miss variables, functions and many other goodies. Without variables, we've to duplicate values of many things like font, colour throughout files. Whenever you need to change these values you've to rely mostly on Find + Replace.
Web designs are more like buildings, they exhibits mathematical properties - order, symmetry and limitation. If you think about the font-size of headings (h1, h2... h6), colour schemes, grids they all exhibits mathematical nature. Web designs can be created by applying mathematical principles that use variables and functions to represent properties, objects and their relationships. The idea of expressing designs using variables and functions helps to alter and create new designs very easily! It also helps you to maintain and extend your designs. Unfortunately, CSS don't have the ability to represent things in mathematical way and we've to lean on CSS pre-processors.
A CSS pre-processor helps you write CSS styles much like coding. You can use variables, functions, mixins and more. They are around us quite a long time and some of the famous ones in the market are: SASS, LESS and Stylus.
LESS is one of the popular CSS pre-processor and Bootstrap has chosen it for some good reasons. Let me show you some of the important language features of LESS.
6.1.2 Variables
In LESS, variables start with "@". They help to control the change of values from a single place. You don't have to duplicate a colour in dozen places and worry whenever you need to change (who easily get satisfied in choosing colours, huh?).
@link-color: #DAA019; // orange
@link-color-hover: darken(@link-color, 15%); // brown
a
{
color: @link-color;
}
a:hover
{
color:@link-color-hover;
}
Listing 3. Variables in LESS
Generated CSS:
a
{
color: #DAA019;
}
a:hover
{
color: #956E11;
}
Listing 4. Generated CSS
In the above LESS snippet, both @link-color and @link-color-hover are variables. darken() is a built-in LESS colour function that decrease the lightness of a colour to a certain amount passed to it as percentage.
LESS Functions
6.1.3 Mixins
Mixins helps you to mix a set of CSS properties wherever required. An example will help you understand easily.
.border-radius(@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#mypanel {
width: 300px;
.border-radius(@radius: 10px);
}
#container {
.border-radius(@radius: 5px);
}
Listing 5. Mixins in LESS
Generated CSS:
#mypanel {
width: 300px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#container {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Listing 6. Generated CSS
Can we use LESS in browsers?
Yes you can. For that, you've to reference less.js script file in your html pages after your stylesheets.
Ex.
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
</head>
Listing 7. Referencing less.js to work directly with LESS in browsers
To know about the complete language features and functional reference visit the LESS website.
7. Exploring Bootstrap folders, especially the one named "less"
Let's come back to work. Open our project MyBlogTemplate in Sublime Text. Let's explore the bootstrap source code. If you remember, we've the complete bootstrap source code under the "lib" folder. Expand the folder "bootstrap-3.1.1" and you'll see a bunch of folders.
Fig 11. Bootstrap source code folders
Following are the important folders and what they contain.
dist - This folder contains the distributable, compiled and minified CSS files, js files and fonts.
docs - Contains examples
js - Contains all the JavaScript plugins
less - Contains all the core LESS files where the total project is built on. It is from these LESS files, both the bootstrap.css and bootstrap.theme.css files are generated. This is the folder we are interested.
7.1 Looking close at "less" folder
The style of each Bootstrap component is controlled by a separate LESS file. For example, the style of buttons are controlled buttons.less. The style of modal windows are controlled by modals.less. Likewise, there are LESS files that controls the styles for dropdowns, form elements, tables, grids etc. There are some common LESS files exists in the folder. For example, the normalize.less file contains the basic styles defined for the html elements. The mixins.less file contains re-usable mixins that are used throughout the project. The two very important files in the folder are: variables.less and bootstrap.less.
7.1.1 variables.less and bootstrap.less
If you open the variables.less file, you can see hundreds of variables. Don't take those variables light! They are the ones that control typography, colour scheme, grid system and the styles of all the components. By changing the values of these variables you can customize Bootstrap as you want.
Fig 12. variables.less
The bootstrap.less file is the main one that imports all the others and compiles them into one CSS file.
Fig 13. bootstrap.less
8. Setting up the project
In this section, we'll create the necessary folders and files required initially. Let me rephrase the plan. I told you earlier we've to modify the source LESS files (mostly the variables) to customize the typography, colour system and other things. It's not a good idea to directly modify the source files, we may lose the track about the changes and it's difficult to upgrade to newer versions. There is a better idea! We can create our own LESS files, import the bootstrap source LESS files in them and override the interesting variables by duplicating them in the new files and assigning new values to it.
Let's break down the things into below four steps.
We are going to do the following things in this section.
- Create custom LESS files
- Set up output folder keep the compiled CSS files
- Configuring the settings for Less2Css plugin
- Update the Bootstrap references in HTML files
8.1 Create custom LESS files
Create a new folder called "less" at the root of the project to keep all our custom LESS files. We've to mostly modify the things in variables.less and bootstrap.less files. For that, we've to create couple of new LESS files custom.variables.less and custom.bootstrap.less.
In the custom.variables.less file, import the original variables.less file as shown below. We'll be overriding the interested variables here soon!
@import "../lib/bootstrap-3.1.1/less/variables.less";
// more code to follow
Listing 8. custom.variables.less
Copy the original content from bootstrap.less and paste it into the custom.bootstrap.less file. Replace the line that imports variables.less with custom.variables.less.
// Core variables and mixins
@import "custom.variables.less";
@import "../lib/bootstrap-3.1.1/less/mixins.less";
// Reset
@import "../lib/bootstrap-3.1.1/less/normalize.less";
@import "../lib/bootstrap-3.1.1/less/print.less";
// Core CSS
@import "../lib/bootstrap-3.1.1/less/scaffolding.less";
@import "../lib/bootstrap-3.1.1/less/type.less";
@import "../lib/bootstrap-3.1.1/less/code.less";
@import "../lib/bootstrap-3.1.1/less/grid.less";
@import "../lib/bootstrap-3.1.1/less/tables.less";
@import "../lib/bootstrap-3.1.1/less/forms.less";
@import "../lib/bootstrap-3.1.1/less/buttons.less";
// Components
@import "../lib/bootstrap-3.1.1/less/component-animations.less";
@import "../lib/bootstrap-3.1.1/less/glyphicons.less";
@import "../lib/bootstrap-3.1.1/less/dropdowns.less";
@import "../lib/bootstrap-3.1.1/less/button-groups.less";
@import "../lib/bootstrap-3.1.1/less/input-groups.less";
@import "../lib/bootstrap-3.1.1/less/navs.less";
@import "../lib/bootstrap-3.1.1/less/navbar.less";
@import "../lib/bootstrap-3.1.1/less/breadcrumbs.less";
@import "../lib/bootstrap-3.1.1/less/pagination.less";
@import "../lib/bootstrap-3.1.1/less/pager.less";
@import "../lib/bootstrap-3.1.1/less/labels.less";
@import "../lib/bootstrap-3.1.1/less/badges.less";
@import "../lib/bootstrap-3.1.1/less/jumbotron.less";
@import "../lib/bootstrap-3.1.1/less/thumbnails.less";
@import "../lib/bootstrap-3.1.1/less/alerts.less";
@import "../lib/bootstrap-3.1.1/less/progress-bars.less";
@import "../lib/bootstrap-3.1.1/less/media.less";
@import "../lib/bootstrap-3.1.1/less/list-group.less";
@import "../lib/bootstrap-3.1.1/less/panels.less";
@import "../lib/bootstrap-3.1.1/less/wells.less";
@import "../lib/bootstrap-3.1.1/less/close.less";
// Components w/ JavaScript
@import "../lib/bootstrap-3.1.1/less/modals.less";
@import "../lib/bootstrap-3.1.1/less/tooltip.less";
@import "../lib/bootstrap-3.1.1/less/popovers.less";
@import "../lib/bootstrap-3.1.1/less/carousel.less";
// Utility classes
@import "../lib/bootstrap-3.1.1/less/utilities.less";
@import "../lib/bootstrap-3.1.1/less/responsive-utilities.less";
Listing 9. custom.bootstrap.less
8.2 Set up output folder keep the compiled CSS files
Create a new folder called "bootstrap-custom" at the root of the project to keep all the compiled CSS files and the dependencies. Copy the contents of the "bootstrap-3.1.1\dist" folder and paste them into "bootstrap-custom" folder. Delete the Bootstrap CSS files from the "bootstrap-custom\css" folder. We'll create custom CSS files from the LESS files and drop them in that folder.
8.3 Configuring the settings for Less2Css plugin
We've installed the Less2Css plugin but we haven't seen how to use it yet. To use, first we've to configure it. Open the "Read me" file from Preferences > Package Settings > Less2Css > Read me. This file tells you about the purpose of the plugin, how to install it and configuration parameters. What we are interested now is about the configuration.
Some of the important configuration parameters are:
lessBaseDir: This folder is only used when compiling all LESS files at once through *Tools \ Less>Css \ Compile all less in less base directory to css*. This can be an absolute path or a relative path. A relative path is useful when your projects always use the same structure, like a folder named "less" to keep all your LESS files in. When compiling all files at once it will also process all subfolders under the base folder.
main_file: When you specify a main file only this file will get compiled when you save any LESS file. This is especially useful if you have one LESS file which imports all your other LESS files. Please note that this setting is only used when compiling a single LESS file and not when compiling all LESS files in the LESS base folder through *Tools \ Less>Css \ Compile all less in less base directory to css*.
minify: The allowed values are "true" and "false". When this setting is set to "true" the LESS compiler will be instructed to create a minified CSS file.
outputDir: Use this setting to specify the folder where the CSS files will be placed.
Take some time and go through each parameter in the configuration section. We are going to configure the above four parameters at the project level.
8.3.1 Creating Sublime Text project
Like any other plugin, we can configure Less2Css at global, user or project level. We are going to configure here at project level and for that first we've to convert the project folder to Sublime project. You can easily do that by opening the Project menu and select the "Save Project as" option. Give some name of the project like "MyBlogTemplate" and save it in the root. Two files will be created with names MyBlogTemplate.sublime-project and MyBlogTemplate.sublime-workspace. You cannot open the project directly by clicking the project files but you can do that from Sublime Text through the Project > Open Project option.
If you open the MyBlogTemplate.sublime-project in Sublime Text, you'll see the following content.
{
"folders":
[
{
"path": "/D/MyBlogTemplate"
}
]
}
Listing 10. MyBlogTemplate.sublime-project
The value of the "path" will be different based on where you setup the project folder. To configure the parameters for the plugin, create a new node called "settings" below "folders". Under that, create one more node called "less2css" where we set the values for those parameters. If we need to configure other plugins, we've to separate nodes under "settings".
The base directory where all the LESS files exists in our project is "less". Since we've already defined the folder path, we can specify the relative path i.e. "less" to lessBaseDir. We want the generated CSS files to be stored in the "css" folder under "bootstrap-custom", so the value of outputDir is "bootstrap-custom\\css". The main-file is the one that imports all the LESS files and compiles to a single CSS file, without doubt it is "custom.bootstrap.less". Finally, we need to minify the generated CSS files and for that we've to set the property minify to true.
This is how the project file will look after these changes.
{
"folders":
[
{
"path": "/D/MyBlogTemplate"
}
],
"settings":
{
"less2css":
{
"lessBaseDir": "less",
"outputDir": "bootstrap-custom\\css",
"main_file": "custom.bootstrap.less",
"minify": true
}
}
}
Listing 11. MyBlogTemplate.sublime-project
8.3.2 Invoking the plugin
You can test the plugin is working fine by opening custom.bootstrap.less and just try to save it. When you do that, in the background the plugin invokes the compiler (you can see a command window open and close quick), compiles the LESS file and drops the minified CSS file custom.bootstrap.css into "bootstrap/css" folder. If something goes wrong, you'll see an error popped-up infront of you.
8.4 Update the Bootstrap references in HTML files
You've to update the Bootstrap references of all the HTML files to point to the generated CSS file i.e. custom.bootstrap.css.
<head>
...
<link href="bootstrap-custom/css/custom.bootstrap.css" rel="stylesheet" />
<link href="blog.css" rel="stylesheet" />
<head>
<body>
...
<script src="lib/jquery-2.0.3.min.js"></script>
<script src="bootstrap-custom/js/bootstrap.min.js"></script>
</body>
Listing 12. index.html
Note that, I did couple of more changes there. I removed the reference to the theme CSS file (bootstrap.theme.min.css) and updated the Bootstrap script reference to point to the one in the "bootstrap-custom" folder. The bootstrap theme CSS file is generated from a separate LESS file called theme.less file (which is not imported in the bootstrap.less). We are going to import that file also in our custom.bootstrap.less and hence all the styles will be compiled into the single CSS file - custom.bootstrap.css.
Our project setup is ready! Let's start customizing one of the principal components that influence the look of any website - typography.
9. Customizing Typography
9.1 Typography
Typography is the art of arranging type into legible, aesthetically pleasing and design-appropriate layout - from here
The word type in the above paragraph represents typeface. Sometimes typeface and font are used interchangeably, but they are different. Though typography is not only just selecting fonts but the choice of a font along with the other parameters can make a design hot-or-not.
9.2 Selecting custom web fonts
Many websites that display stunning typography utilizes different fonts for heading and content. The fonts for heading are mostly narrow and tall compared to the content. Bootstrap uses the same font "Helevtica Nueue" everywhere like heading, body and other places like forms, buttons etc. We are going to enrol two fonts for our website, one for heading and one for content.
9.2.1 Google Fonts
Though we've variety of desktop fonts to choose from I want to go for custom web fonts. One of the places you can shop for free is Google Fonts.
Fig 14. Google Fonts
The Google Fonts website provides you search and filter tools to narrow down the font you are dreaming. It also provides preview about how each font appears when you use it in a word, sentence, paragraph or poster. You also have options to see the font in different styles (italic, bold) and grab the font link to quickly use in websites.
9.2.2 Body font
There is a constant battle between serif and sans-serif typefaces. Though I prefer the serif font "Times New Roman" in writing word docs, for web I would prefer to go with sans-serif for its calm and pleasing appearance. You can search for san-serif fonts by selecting only the "Sans-serif" option from the filters drop-down menu.
Fig 15. Sans-serif fonts
Some of the popular Sans-serif web fonts are: Open Sans, Roboto, Lato, PT Sans and Ubuntu. You can use any one of them or why not a different one? I didn't put much effort to search a better sans-serif font because I already know "Open Sans" will fit my need. All I wanted to do is to grab it's link from Google Fonts page to use in my pages. I just searched for "open sans" which gave couple of results. We've to use the one called "Open Sans" not "Open Sans Condensed".
Fig 16. Open Sans fonts
Click the "Quick-use" menu at the right bottom which will take you to another page where you can select the styles, character sets required for the font. At the very middle you'll see a section called "Add this code to your website" where you can copy the link.
Fig 17. Open Sans quick use
Drop the copied link to all the four html pages (index, single-post, contact and about-me) of our template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Bootstrap Blog Template">
<meta name="author" content="Vijaya Anand">
<title>Home</title>
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- Custom Bootstrap CSS file -->
<link href="bootstrap-custom/css/custom.bootstrap.css" rel="stylesheet" />
<link href="blog.css" rel="stylesheet" />
</head>
<body>
...
</body>
</html>
Listing 13. index.html
This will not make any change in the appearance because we haven't used the font anywhere in stylesheets. Wait, we are going to do that soon! Before that, let's select a nice font for heading too.
9.2.3 Heading font
I prefer headings to be tall and narrow. I don't bother much about the type, whether it is serif or sans-serif, for the time I stick with sans-serif. To search such fonts, along with selecting the "Sans serif" option in the filter I also have to select the Width.
Fig 18. Sans-serif narrow fonts
There is variety of fonts that matches my requirement, like Oswald, Open Sans Condensed, Yanone Kaffeesatz and more. I would like to go with Yanone which I already used before and it's simply outstanding.
Fig 19. Yanone Kaffeesatz
Click the Quick Use menu. In the "Choose the styles you want" section please select Light 300, Normal 400 and Bold 700 as well.
Fig 20. Yanone quick use
Finally grab the link and paste it to all the html pages.
9.2.4 Typography used by Bootstrap
You can know the important variables that control the typography of Bootstrap by visiting the Typography section of Bootstrap customization page. More than dozen variables listed out there control the typography. By changing the values of these variables you can customize the font, line-height and colour for content and headings of any website designed by Bootstrap.
Fig 21. Typography variables
I recommend you all to first check the Bootstrap customization page to know the different LESS variables that controls different things. Note that, the customization page doesn't contain all the variables. So if you don't find something interesting then it's better to check out the source files starting from variables.less. Most of the variables are present in variables.less but some do exists in individual LESS files.
Here is our plan to customize the typography. First we are going to customize the style (font-family, font size and line-height) for content (<body>). For that, we've to filter the variables shown in the above table that controls the content and change them according to our needs. Then, we are going to the same thing for headings (h1, h2...h6)
9.2.5 Customize the font-family, font size and line-height for content
The following are the variables that influence the typography of content.
@font-family-sans-serif
@font-family-serif
@font-family-monospace
@font-family-base
@font-size-base
@line-height-base
We can group the above variables based on the property they influence like font-family, font-size and line-height.
9.2.5.1 Overriding font-family
We've chose the "Open Sans" sans-serif font for the content. To apply that, we've to override the @font-family-sans-serif variable in our custom.variables.less file as shown below.
@import "../lib/bootstrap-3.1.1/less/variables.less";
@font-family-sans-serif: "Open Sans", sans-serif;
Listing 14. Overriding the body font-family in custom.variables.less
Of the three font-family variables, the san-serif is what assigned to @font-family-base which indeed assigned to <body>. You can understand this from scaffolding.less file.
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
}
Listing 15. scaffolding.less
Just save the custom.variables.less file and you'll notice the custom.bootstrap.css file regenerated automatically. Alright, let's shoot the index.html file in the browser to see the changes.
Fig 22. After the body font is changed to 'Open Sans'
You may not see a big change and it's because both the "Open Sans" and "Helevetica Nueue" are from the same sans-serif font-family. I felt the font size can be reduced little bit smaller, like 1px. The default font size for the body is 14px, which you can understand from the @font-size-base variable. Also, the paragraph looks little congested. We should increase the line height as well.
9.2.5.2 Overriding font-size and line-height
Let's decrease the @font-size-base to 13px and increase @line-height-base to 1.8.
@font-size-base: 13px;
@line-height-base: 1.8;
Listing 16. Overriding the font-size and line-height in custom.variables.less
Fig 23. After decreasing the font-size to 13px
Much better now! Let's work on heading.
9.2.6 Customize the font-family, font size and line-height for heading
The style of heading is controlled by the following variables.
@headings-font-family
@headings-font-weight
@font-size-h1
@font-size-h2
@font-size-h3
@font-size-h4
@font-size-h5
@font-size-h6
@headings-line-height
@headings-color
The default value of @headings-font-family is inherit, which means Bootstrap uses the same font-family for headings that is used for content. We are going to use "Yanone Kaffeesatz" as the heading font. Let's update the @headings-font-family variable and also the @headings-font-weight.
@headings-font-family: 'Yanone Kaffeesatz', sans-serif;
@headings-font-weight: 700;
Listing 17. Overriding the heading font style in custom.variables.less
Fig 24. After changing the heading font to 'Yanone'
The headings are a bit a small, isn't it? We've to definitely increase their size. The font-size of <h1>...<h6> is controlled by @font-size-h1...@font-size-h6. Following is the default value of these variables.
@font-size-h1: floor((@font-size-base * 2.6))
@font-size-h2: floor((@font-size-base * 2.15))
@font-size-h3: ceil((@font-size-base * 1.7))
@font-size-h4: ceil((@font-size-base * 1.25))
@font-size-h5: @font-size-base
@font-size-h6: ceil((@font-size-base * 0.85))
Listing 18. variables.less
All those variables depend upon @font-size-base. If you remember we've decreased the value of this variable to 1px. One quick and easy solution is to increase the value of @font-size-base which eventually increase the size of headings. But, I don't like that solution. I want the body font-size stay in 13px, so let's increase the decimal factor in the formulas.
Sometimes designers use mathematical principles (for ex. Fibonacci series) in setting font-sizes for headings elements. I don't know what principle Bootstrap has applied to choose those decimal numbers. Alright, to fix the size problem, I've to add 0.5 to all those decimal numbers.
@font-size-h1: floor((@font-size-base * 3.1));
@font-size-h2: floor((@font-size-base * 2.65));
@font-size-h3: floor((@font-size-base * 2.2));
@font-size-h4: floor((@font-size-base * 1.75));
Listing 19. Overriding the heading font-sizes in custom.variables.less
I've left the @font-size-h5 and @font-size-h6 to the default, because I rarely use them. Let's save the page and refresh the browser.
Fig 25. After adjusting the headings font-sizes
Much better! We've nearly done the customization required for typography but not complete. Note that, we've to customize the font of the text used in components like buttons and others. Don't worry about that now, we'll do that in "Customizing Components" section.
10. Customizing Colour Scheme
10.1 Colours in Web design
Colours have a great impact in web design. Not only in web, colours play a key role in every part of life like art, buildings, science and culture. Colours influence one's emotion. The impression of colours on users varies by culture, country etc. Coming back to web design, one should wisely choose the colours such that they should fuse with website content. It does not make much sense to use heavy black for a website that talks about health and medicine, probably green would be better! Colour theory itself is a separate science and as a web designer we should know the basics to utilize them efficiently in websites. Cameron has written an excellent series about colours and their usage in web design. Worth to read!
10.2 Colour palettes
Usually, websites uses a bunch of colours to beautify its content. This bunch of colours is typically called as "Colour Scheme" or "Colour Palette". There are lot of tools available to create colour palettes online. Some of the quick ones I found are: colourlovers, colorhunter and colorschemedesigner. Many tools help you to create colour palettes from images. You can use any one of these tools to create/choose colour palettes or select a palette and tweak it according to your wish. If nothing works, then you can create something from scratch. For our blog template, I faced a hard time to find a nice palette and finally... I ended up creating one from scratch!
10.3 Creating custom colour scheme for our blog template
Before creating the colour palette for our Bootstrap template, first we've to know the variables that control the colours. If you visit the Bootstrap customization page, there is a section that list out the LESS variables that control colours.
Fig 26. Colours Variables
All these variables exist in the variables.less file.
10.3.1 Bootstrap's default colour scheme
You can split the colours into two groups: Gray and Brand Colours.
10.3.1.1 Gray Colours
Gray colours are used to style body text, form controls, navigation links, panels etc. They are used to decorate text, backgrounds, borders etc.
Following are the variables that belongs part of Gray family.
@gray-darker: lighten(#000, 13.5%);
@gray-dark: lighten(#000, 20%);
@gray: lighten(#000, 33.5%);
@gray-light: lighten(#000, 60%);
@gray-lighter: lighten(#000, 93.5%);
Listing 20. variables.less
I wish Bootstrap would have chosen generic variable names for the variables. Many times we choose different colours for these variables and it makes no sense at that time calling them "gray*". Unfortunately, we are also going to call these colours as "Gray colours" though we are going to assign different colours for these variables. The above variables can be represented by the below colour scheme.
Fig 27. Default Gray Colour Scheme
10.3.1.2 Brand Colors
Brand Colours are used in components like buttons, panels, progress bars and labels to represent different action or information. For example, if you take buttons, there are buttons to represent actions like success, warning, danger, info etc. For each action a separate brand colour is used. The same applies for panels and labels, where they are used to represent different information.
The following are the variables that control Brand Colours.
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
Listing 21. variables.less
Here is the colour scheme created by these variables.
Fig 28. Default Brand Colour Scheme
10.3.2 Choosing different schemes for Gray and Brand colours
We are going to use shades of green to create the colour schemes for Gray and Brand colours.
10.3.2.1 Creating custom scheme for Gray colours
Bootstrap has used pure black (#000) to create all the Gray colours. We are going to use a dark-grayish-green colour (I don't know the right name :).
Fig 29. Base colour for our custom gray colour scheme
Since the colour "#000" is hard-coded in all the formulas, we've to duplicate the complete code (shown in listing 20) in custom.variables.less. Instead of replacing "#000" to "#1F1F1B" directly in the formulas, let's assign that value to a new variable @gray-base and use it in the formulas.
@gray-base: #1F1F1B;
@gray-darker: lighten(@gray-base, 13.5%); // TODO:
@gray-dark: lighten(@gray-base, 20%); // TODO:
@gray: lighten(@gray-base, 33.5%); // TODO:
@gray-light: lighten(@gray-base, 60%); // TODO:
@gray-lighter: lighten(@gray-base, 93.5%); // TODO:
Listing 22. Overriding gray colour scheme in custom.variables.less
The below image shows our custom colour palette for Gray colours.
Fig 30. Custom Gray Scheme
You can feel a tinge of green in it, don't you? Let's create the colour scheme for brand.
10.3.2.2 Creating custom scheme for Brand colours
To create this colour scheme, I altered the base colour (@gray-base) by mixing gray and white and produced bunch of different colours. I also used a secondary colour "orange" for @brand-success. Thanks to ColourZilla, which helped me immensely to work with colours.
Copy the brand variables to our custom.variables.less file and set the below values.
@brand-primary: #AEAF57; // olive green
@brand-success: #DAA019; // orange
@brand-info: #EFEFC2; // light green
@brand-warning: #CFCFB5; // dull green
@brand-danger: #4F4F36; // army green
Listing 23. Overriding brand colour scheme in custom.variables.less
The below image represents the colour scheme created by these variables.
Fig 31. Custom Brand Colour Scheme
It's beautiful! I need one more brand colour to use in borders and other places in components. Let's call it as @brand-light which is not part of our brand colour scheme.
@brand-light: #FBFFDF; // whitish green
Listing 24. custom.variables.less
10.3.3 Setting colours for body background, link and horizontal rule
Before you kick the compiler, I need you to update three more parameters: body background colour, link colour and horizontal rule border colour. The body background and link colours are controlled by the variables @body-bg and @link-color, which you can know form the Scaffolding section. The horizontal line border colour is controlled by @hr-border which you can know from the Miscellaneous section.
I want the body background to be light green (@brand-info) and the link colour to be orange (@brand-success). For the horizontal rule I'll go with dull green (@brand-warning).
Let's override those three variables in custom.variables.less.
@body-bg: @brand-info;
@link-color: @brand-success;
@hr-border: @brand-warning;
Listing 25. custom.variables.less
That's it! Now save your changes and refresh the page with eyes wide open.
Fig 32. Blog Template
Wow! Isn't that looks cool? Yes, it is. We've customized the general colour scheme but still we've more work to do. We've to customize the colours for panels, buttons and other components. Let's do that next!
11. Customizing Components
We are going to customize the following components used in our template.
- Panels
- Wells
- Navigation bar
- Pager
Primarily we are going to change their colours and... some minor things.
11.1 Customizing Panels
More than dozen LESS variables control panel's colours, borders and paddings.
Fig 33. Panel Variables
You can classify the panels into four types: default, primary, success, warning and danger.
In our blog sidebar, we've used the default type (@panel-default) and that's why you see the gray colour in heading background and borders.
Fig 34. Default Panels
It would look great if we apply some olive green (@brand-primary) to the heading background. For that, we've to replace all the default panels (panel-default) with primary panels (panel-primary). The primary panels uses the @brand-primary as the heading background.
Update the sidebars in index.html and singlepost.html files to replace the default panels to primary panels.
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Latest Posts</h4>
</div>
<ul class="list-group">
<li class="list-group-item"><a href="singlepost.html">1. Aries Sun Sign March 21 - April 19</a></li>
<li class="list-group-item"><a href="singlepost.html">2. Taurus Sun Sign April 20 - May 20</a></li>
<li class="list-group-item"><a href="singlepost.html">3. Gemini Sun Sign May 21 - June 21</a></li>
<li class="list-group-item"><a href="singlepost.html">4. Cancer Sun Sign June 22 - July 22</a></li>
<li class="list-group-item"><a href="singlepost.html">5. Leo Sun Sign July 23 - August 22 </a></li>
</ul>
</div>
Listing 26. index.html
Save the files and refresh the browser.
Fig 35. Primary Panels
Looks great! Actually, three things I want to fix in the primary panels. I don't like the striking green border (@panel-primary-border). It creates a discontinuity. Next, the background colour (@panel-bg) and heading text (@panel-primary-text) colours are so white!
Fig 36. Customizing Panels - Changing Colours
Let's apply the @brand-info colour to the border which creates a smooth transition from body to panels. Next, replace the snow white from background and heading text with @brand-light.
@panel-bg: @brand-light;
@panel-primary-text: @brand-light;
@panel-primary-border: @brand-info
Listing 27. Overriding panel variables in custom.variables.less
If you refresh the page, you see the background still white. The reason is, we are using "list groups" inside them and their default background is snow white. Let's change the LESS variable (@list-group-bg) that controls their background colour. Also, I need to replace their border colour (@list-group-border) to @brand-info.
@list-group-bg: @brand-light;
@list-group-border: @brand-info;
Listing 28. Overriding listgroup variables in custom.variables.less
Fig 37. Customizing List groups
Much better!
Let's work on the subscribe widget, which is still gray!
11.2 Customizing Wells
From the customization page, you know the two variables that control well's background and border.
@well-bg: #f5f5f5;
@well-border: darken(@well-bg, 7%);
Listing 29. Well variables
As default, the wells are filled by gray colour.
Fig 38. Wells
I would like to make the background and border colours same as panels i.e. @brand-light for background and @brand-info for border.
@well-bg: @brand-light;
@well-border: @brand-info;
Listing 30. Overriding well variables in custom.variables.less
Let's see how the widget looks now.
Fig 39. Customizing Wells - Changing Colours
Hmm... not bad! I don't like the font style of the lead paragraph "Don't want to miss update? bah blah" inside the well. It's not stands out. I would like to set the typeface as "Yanone" and make it bold. But, if I customize the variables of "lead" it'll affect many places. Bootstrap doesn't provide variables to customize the font of lead paragraphs inside wells. These are the places we've to go more than modifying variables and this is one good example. Even in LESS files, we can write CSS. Let's apply the styles directly through CSS selector.
@well-bg: @brand-light;
@well-border: @brand-info;
// There are no LESS variables available to override the styles of "lead" inside "well". So, we need this.
.well {
.lead {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
font-size: @font-size-h3;
}
}
Listing 31. Overriding "lead" inside wells in custom.variables.less
Fig 40. Customizing Wells - Fixing "lead" font
I hope that'll attract lot of people to subscribe ;)
11.3 Customizing Navigation bar
The navigation bar is tar black! It gives a feel that the top one inch is sliced out :O.
Fig 41. Inverse Navigation Bar
I still love to have a dark colour in the place. How about the army green colour (@brand-danger)? Let's give a try, but before that, let's see the variables that control them.
Fig 42. Navbar Variables
That's a hell lot of variables! If you remember we've used inverse navigation bar (navbar-inverse), so we better concentrate only on those set of variables. We need to customize the background, link and brand colours.
After spending some time with Colourzilla I figured out the brand colours.
@navbar-inverse-bg: @brand-danger;
@navbar-inverse-link-color: @brand-primary;
@navbar-inverse-link-hover-color: lighten(@brand-primary, 20%);
@navbar-inverse-brand-color: @brand-success;
@navbar-inverse-brand-hover-color: lighten(@brand-success, 20%);
Listing 32. Overriding navigation variables in custom.variables.less
Fig 43. Customizing Navbar - Changing Colours
Not bad! The army green gives a good strong feel for the navigation bar. But I see some improvement required for the links. I want to make them bold possibly in a different font. There are no LESS variables provided to customize them. We've to do the same thing we did to customize the "lead" paragraph inside "well" component.
.navbar-nav > li > a {
font-family: @headings-font-family;
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
}
Listing 33. Overriding navigation links custom.variables.less
The above code is straight to understand. I've set the heading font to the anchor and increased the font size to 18px. I also made it bold and uppercase to make them exceptional.
This is how they look now.
Fig 44. Customizing Navbar - Changing links font
Finally... we want to something for the gray submit button near the search-box. If you see the markup you can understand it's a default type button (btn-default).
<button type="submit" class="btn btn-default">Submit</button>
Listing 34. Search button
Let's make the button primary. For that, we've to replace the btn-default CSS class to btn-primary. Do that in all html files.
<button type="submit" class="btn btn-primary">Submit</button>
Listing 35. Changing search button's CSS class
Fig 45. Customizing Navbar - Fixing button
Perfect! Don't worry about the brand text now. We'll replace it with a nice image at end.
11.4 Customizing Pager
The pagination links are really lost by the background. Hard to notice for poor eyes :(
Fig 46. Pagination
I'm not going to explain what I've done below to improve it. I believe you've knowledge to figure out yourself ;)
@pagination-color: @brand-light;
@pagination-bg: @brand-primary;
@pagination-border: @brand-primary;
@pagination-hover-color: @brand-primary;
@pagination-hover-bg: @brand-light;
@pagination-hover-border: @brand-primary;
.pager {
li {
> a {
color: @pagination-color;
}
> a:hover,
> a:focus {
color: @pagination-hover-color;
}
}
}
Listing 36. Overriding pagination variables in custom.variables.less
Applying colours to links is little complicated and that's why we need the bottom snippet. You can see the power of LESS in applying styles to the different states of <a> element. How compact and easy it is!
Fig 47. Customizing Pagination
That's it! We've customized most of the components used in our template. Still there are other components like thumbnails (we've used in aboutme page) you may have to take a look. Go through all the pages and make sure everything is perfect.
12. Customize miscellaneous parameters like gradients and shadows
Bootstrap uses a separate CSS file called bootstrap.theme.css for producing advanced CSS effects like shadows and gradients. If you remember, I asked you to remove the reference to it from all the html files earlier. The theme.less file is the one that contains all the gradient and shadow styles. To use it, we've to import it into our custom.bootstrap.less.
...
// Theme
//@import "../lib/bootstrap-3.1.1/less/theme.less";
Listing 37. Importing theme.less in custom.bootstrap.less
Save the file! Refresh the page!! See the magic!!!
Fig 48. Template after including theme.less
Do you notice the gradients in buttons and shadows around panels, cool isn't it? It worked just like that. The theme.less file smartly used the LESS variables that we've overridden and that's why we don't need to do any additional work to achieve this.
There is a small glitch though. The subscribe widget not looks great like it was. I decided to get rid of the gradient effects for the "well" and for that I've to set the background-image to "none". And also I need to reset the border colour and apply the box shadow to blend the widget with the below ones.
.well {
background-image: none !important;
border-color: @well-border !important;
.box-shadow(0 1px 1px rgba(0,0,0,.05)) !important;
.lead {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
font-size: @font-size-h3;
}
}
Listing 38. Fixing "well" gradient effects in custom.variables.less
One final thing I've to do before wrapping the whole thing up is to replace the text ("Astrospace") in the logo with a beautiful image.
12.1 Fixing Logo
There are lot of tools available that helps you to design logo online. I've used cooltext.com and as the name it's cool! I've downloaded the generated image under a new folder called "images" at the root.
Fig 49. Dropping logo image in "images" folder
Finally, modify the logo link to embed the downloaded image in all html files.
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo Link -->
<a href="index.html" class="logo-link"><img src="images/logo.png" alt="Astrospace"></a>
</div>
...
</body>
Listing 39. Modifying the logo link
Since we've replaced the logo text with image we no more need the Bootstrap CSS class navbar-brand applied to the link. We've replaced it with our custom one called logo-link to create some margin around the image.
a.logo-link {
display: inline-block;
margin-right: 10px;
margin-top: 2px;
}
Listing 40. blog.css
Save all your changes and refresh the page. You should see the below image.
Fig 50. Customized Bootstrap Blog Template
That's it, we've completed the workshop! You've two things in your hands now: a beautiful blog template and the precious knowledge to craft and customize any website template using amazing Bootstrap.
13. Summary
In this two part series, we saw how to quicky create a nice template using Bootstrap and how we can customize quite easily through the CSS preprocessor language LESS. I hope you enjoyed this workshop. Please share your valuable thoughts, appreciations and questions through comments. I'll be more than happy to reply. Thanks for reading!
14. References
- How to customize Twitter Bootstrap to fit your web design - Rojan Gh.
- Bootstrap Website
- {less}
- Working with LESS + LESS Hat + Sublime Text
- Sass And LESS: An Introduction To CSS Preprocessors
15. Revision History
- 23/06/2014 - Published
- 24/07/2014 - Minor corrections in article (Thanks to lonhosford)