Applying a Custom Theme - Extending Bootstrap (2014)

Extending Bootstrap (2014)

Chapter 2. Applying a Custom Theme

Themes are an easy way to customize your project. There are numerous free and paid themes available for Bootstrap. In this chapter, you will learn where to find themes and how to choose a suitable one and adapt it to your project.

When to use a theme

Now that you have learned a bit about Bootstrap, it is time you learn about the difference between a professional website built with Bootstrap and an amateur one. The most common mistake that developers make is using Bootstrap as it is and not customizing it at all. This is the main reason why many websites today look alike, and that is not a good thing.

It is almost like most developers forgot about designers the moment they started to use Bootstrap on their website because they thought that it looked awesome with its default styles. The following screenshot clearly illustrates how similar Bootstrap sites can look:

When to use a theme

Of course, this is wrong. The default styles are just that, default. In order to give a professional feel to a website, you need to customize Bootstrap to some extent. Keep in mind that CSS frameworks are only a base for your styles, not the final product. The extent to which you need to customize your styles depends on what you are making.

If you are developing an administration interface that will be used by a small group of people, you could do this with very little customization. However, you should always try to do some minor customizations, for example, change the primary color of your theme to match a color in the client's logo or something similar to it and make them feel more at home while using your product.

On the other hand, if you are making a public website, you need to customize your theme in order to give it a professional feel. The easiest way to give that feel to your website is applying a professional-level theme to it and tweaking it according to your needs.

Finding a suitable theme

There are a lot of themes available for Bootstrap, both free and paid. In general, there is not much of a difference in the quality between paid and free themes, but if you go for a paid theme, there are many more options to choose from.

There are many websites that offer Bootstrap themes. The following are some of the popular ones:

· http://bootswatch.com (free)

· http://startbootstrap.com (free)

· http://jobpixels.com (free)

· http://bootstrappage.com (free and paid)

· http://wrapbootstrap.com (paid)

· http://themes.walkingpixels.com (paid)

· http://themeforest.net (paid)

You may be wondering why someone would buy a theme instead of just making their own. The reason is simple yet easily overlooked. It is not that easy to build a professional Bootstrap theme, especially not a responsive one. There is a great deal that you need to know about Bootstrap and LESS in order to do so. Do not worry; you will soon build your own theme and see how challenging it can be.

In order to make things easier, just choose Journal (http://bootswatch.com/journal/), a modern newspaper-like theme, for your first Bootstrap app. This way, you do not need to browse through thousands of themes and try to decide which one to go with. Go ahead and download Journal from Bootswatch; for now, you only need the bootstrap.min.css file. Next, you will add your newly downloaded theme to the project that we started in the previous chapter.

Applying the theme

In the previous chapter, you created a very basic Bootstrap project using the default build of Bootstrap. That project did not do much, so let us add some more HTML to it in order to see what your new theme does to it. Replace the contents in index.html with the following:

<!DOCTYPE html>

<html>

<head>

<title>A simple blog </title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/custom.css" rel="stylesheet">

</head>

<body>

<nav class="navbar navbar-default" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Blog</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Archive</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

<div class="container">

<div class="content">

<div class="jumbotron">

<div class="container">

<h1>A simple blog</h1>

</div>

</div>

<article>

<header>

<h2>Extending Bootstrap</h2>

<p><time pubdate="pubdate">1/12/2012 3:36 PM</time> · <a href="#">Blogger</a></p>

</header>

<p>Recently I stumbled on a book on extending Twitter Bootstrap and it really...</p>

<p class="read-more"><a href="#">Read more »</a></p>

<footer>

<ul class="list-inline">

<li><a href="#" class="label label-primary">Bootstrap</a></li>

<li><a href="#" class="label label-primary">CSS</a></li>

<li><a href="#" class="label label-primary">LESS</a></li>

<li><a href="#" class="label label-primary">JavaScript</a></li>

<li><a href="#" class="label label-primary">Grunt</a></li>

</ul>

</footer>

</article>

</div>

</div>

<script src="https://code.jquery.com/jquery.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</body>

</html>

Reload your browser, and your project should now look something like the following screenshot:

Applying the theme

Now it is time to apply the theme that you downloaded. Grab the file that you downloaded from Bootswatch and replace your bootstrap.min.css file with it. If you now reload your browser, you will notice that your page looks a bit different in terms of font and color, as shown in the following screenshot:

Applying the theme

As you may have noticed, the page looks a bit different after you applied the theme; this is only scratching the surface with customizing Bootstrap. Next, you will learn how to perform some simple customizations in your newly applied theme.

Customizing your theme

The easiest way to customize a theme is to override its styles. It is preferable that you use Google Chrome because of its outstanding Developer Tools, but you are free to use any tool that you feel comfortable with. However, the examples in this book use Chrome developer tools, so it may be easier to follow if you use this as well. Perform the following steps to customize your theme:

1. Start by opening your browser and toggle the developer tools by pressing F12 on Windows or Alt + Command + C on OS X. You should see something like the following screenshot:

Customizing your theme

2. Before you start overriding styles, let us take a quick look at the developer tools. You only need to use the Elements tab that consists of the DOM structure (on the left) and the styles (on the right). In order to override a specific style, you need to find its current definition. This is where the developer tools come in. While this might seem unnecessary to some, it is very important that you look up the definition for the style that you are overriding in order to make sure that your selector actually overrides the style wanted.

To override styles, you should create a new style sheet named custom.css and include it directly after bootstrap.min.css in index.html; this is shown in the following code snippet:

<head>

<title>A simple blog ·

</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/custom.css" rel="stylesheet">

</head>

3. First, you could get rid of those rounded corners; they are a bit outdated anyway. Use the Inspect tool in the developer tools to find jumbotron.

Customizing your theme

Sometimes, you may have to scroll down quite a bit in order to find the style that you want to override.

4. As you can see from the preceding screenshot, the jumbotron styles are defined with a .container .jumbotron selector in bootstrap.min.css. To remove its rounded corners, you need to define a new style using the same selector in custom.css:

5. .container .jumbotron {

6. border-radius: 0;

}

7. While you are at it, you might as well remove the rounded corners from the labels in the following manner:

Customizing your theme

Note that the labels are defined with a .label selector, so you need to define the following style in custom.css to remove the rounded corners:

.label {

border-radius: 0;

}

8. Now that you have done some minor customizations, it is time you do some major ones. Let us change the primary color from the light red color that the Journal theme uses to one of my favorite colors, #bada55, which is a lime green color. Use the same technique to find the selector for each element.

Customizing your theme

Label colors are defined with a .label-primary selector, so add the following code to custom.css:

.label-primary {

background-color: #bada55;

}

Tip

Always use the same property when you override styles, for example, use background-color instead of its shortcut background because background-color takes precedence over background.

9. The labels in the example are links, so you will need to override some more styles or they will still turn red when hovered or focused on. Use the Toggle Element State tool, which can be found in the top-right corner of the Styles tab, to emulate a state in order to see the styles for it:

Customizing your theme

10. You need to add the following additional styles to custom.css:

11..label-primary[href]:hover,

12..label-primary[href]:focus {

13. background-color: #bada55;

}

14. There is still one more thing left to do, that is, change the color of the links. Link styles are usually defined at a global level, so there is no specific class that you need to use as a selector. However, in order to change the behavior of all the states, you need to use some additional rules. Add the following code to custom.css:

15.a,

16.a:active,

17.a:focus,

18.a:hover,

19.a:visited {

20. color: #bada55;

}

21. Now, if you now reload the page, it should look something like the following screenshot:

Customizing your theme

This is just a fraction of what you can do when it comes to customization of Bootstrap themes through overriding styles in CSS. Feel free to use your imagination to customize the example further. Next, you will learn some best practices to bear in mind when customizing Bootstrap themes through CSS.

Best practices

There are a lot of best practices when it comes to customizing Bootstrap themes. In order to avoid the most common mistakes that developers make, the following is a list of the most important things to be kept in mind:

· Use similar selectors when overriding styles: You should always use the exact same selector when you are overriding a style to make sure that the selector is efficient enough. You can use tools (for example, Chrome development tools) to find the correct selectors.

· Make sure that the files are included in the correct order: Remember that you always need to include your overrides after the original styles, otherwise they will not work.

· Do not modify the source files: It is considered bad practice to modify the source files directly because it makes both maintaining your customizations and upgrading the source files difficult, sometimes even impossible. There are no exceptions in this case.

· Do not use !important unless absolutely necessary: You should avoid using !important in your styles because it usually means that your selector is either wrong or not efficient enough. However, there are some rare cases where you need to use !importantin order to override a style. If you do, try to learn why you have to use it before doing so. A good article on this topic can be found at http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/.

· Use classes to style elements and IDs for binding JavaScript functionalities: This way, you can distinguish between the attributes used to define styles for an element and the attributes that are used to identify it through JavaScript.

· Learn how Cascade works: You can improve your styles quite a bit if you understand how CSS Cascade works, that is, how browsers parse your styles and determine which styles are more significant than others. A good article on this topic can be found athttp://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/.

Summary

You now know the basics of customizing Bootstrap and also know why you should always theme your Bootstrap projects at least to some extent.

In this chapter, you have learned when you should use a custom theme, where you can find a suitable theme, and how you can apply it to your project. In addition to this, you have also learned how to customize Bootstrap themes through CSS along with some best practices to consider when overriding styles.

In the next chapter, you will create your own build of Bootstrap and learn how to minimize your codebase by choosing only what you need from Bootstrap.