Creating Your Own Build - Extending Bootstrap (2014)

Extending Bootstrap (2014)

Chapter 3. Creating Your Own Build

In this chapter, you will learn when you should create your own build of Bootstrap, how to do it using the custom tool on the Bootstrap website, and how to minimize the size of your build by removing the components that you do not need. In the previous chapter, you learned about custom themes, but now it is time to leave those themes behind and step up the game by customizing Bootstrap using more advanced methods.

Need to customize Bootstrap

When you use Bootstrap to build a professional web application, it is important that you create your own custom build. Some argue that CSS frameworks should not be used in business applications, but modern frameworks such as Bootstrap provide very good building blocks to build your own styles from the ground up. The following are some advantages of using Bootstrap that you should consider while deciding whether to use Bootstrap or write the equivalent code yourself:

· Community driven: Bootstrap is one of the most popular projects on GitHub and has been forked more than 20,000 times. A lot of developers all over the world have contributed to Bootstrap over the years to make it what it is today.

· Fully customizable: Bootstrap is built with customization in mind. You can choose exactly what you need, so if you only want to use the grid or some of the components, you can leave out everything else. If you later decide that you need something more in Bootstrap, you can include it.

· Widely used: It is relatively easier to find developers who are familiar with Bootstrap than teach new developers how your proprietary CSS framework works, which could be a bit more challenging.

· 100 percent unit tested: Every great project includes unit tests for its code and so does Bootstrap. It is easy to contribute to Bootstrap because you can easily test your changes by running tests to see whether you have broken something. Unit tests also ensure the stability of the project, at least to some extent.

· No need to reinvent the wheel: It is not easy to write your own CSS framework with responsive capabilities. Fortunately, Bootstrap comes with a state-of-the-art responsive grid and is both easy to customize and extend. In most cases, you are better off with Bootstrap than your own framework.

Generating a custom build

Bootstrap is written in LESS, a dynamic style sheet language that compiles into CSS. LESS allows for many features that traditional style sheets do not, such as defining variables and mixins (functions), nesting of rules, and built-in methods. You will learn more about LESS in the next chapter. Bootstrap is mainly developed for customization, so it makes heavy use of LESS features to allow for advanced customizations.

The easiest way to create a custom build is to use the customization tool on the project website. With this tool, you can set custom colors and fonts and customize the grid and components, as well as choose which parts of Bootstrap to include in your build. The tool uses LESS to create the build and compiles it into CSS before sending it your way.

Now it is time to learn a bit more about the custom tool and use it to create your first custom Bootstrap build. Open your web browser and navigate to http://getbootstrap.com/customize. As you probably noticed, the tool is divided into four sections: LESS components, jQuery plugins, LESS variables, and Download. The first two sections allow you to choose which parts of Bootstrap you want to include in your build, and the third section lets you customize colors, fonts, paddings, and so on to suit your needs.

The fourth section allows you to download your custom version of Bootstrap, which can be seen in the following screenshot:

Generating a custom build

For your first build, you can leave the selections under the LESS components and jQuery plugins sections as they are and skip ahead to the LESS variables section. To see how useful the tool can be, you will choose exactly the same customizations as you did in the previous chapter. If you have already forgotten those customizations, do not worry, we will go over them again.

In the previous chapter, you changed the primary color from the default blue color to a lime green color. You can do the same with the tool; scroll down to Color system, which can be found under Basics and change the value in the @brand-primary field to #bada55 as shown in the following screenshot:

Generating a custom build

As you may remember, you also removed the rounded corners from some elements. Unfortunately, the tool is a bit limited and allows you to customize the border radius only for a few elements, so you will have to skip this customization for now. We will get back to removing the rounded corners later.

Now you are ready to download your first custom build of Bootstrap; scroll down and hit the download button at the bottom of the page as shown in the following screenshot. When the build is ready, you will receive it as a ZIP file that contains three folders: css,fonts, and js and a config.json file that is used by the tool. Open the css folder and replace bootstrap.min.css in your project with the one you just downloaded from the build.

Generating a custom build

Alternatively, we can get rid of the color styles in the custom.css file, so open it and remove everything else other than the following styles:

.container .jumbotron {

border-radius: 0;

}

.label {

border-radius: 0;

}

If you now reload the project, it should look exactly like it did at the end of Chapter 2, Applying a Custom Theme, as shown in the following screenshot:

Generating a custom build

Keeping only what you need

It is always a good idea to minimize the code base in your libraries. So, next you will learn how to include only the parts of Bootstrap that you absolutely need. As you have already seen, the custom tool lets you choose which LESS components and jQuery plugins to include in your build. If you look at your bootstrap.min.css file, which is your minified version of Bootstrap, you can see that it is 100 KB in size. Now, let us see how much size is reduced when we leave out everything that you do not need.

Go back to the tool and click on Toggle all in the LESS components section to remove all the selections and then check the items as shown the following screenshot. Scroll down to the bottom of the page and hit the download button.

Keeping only what you need

If you now take a look at bootstrap.min.css, you will notice that it is around 58 KB, which is almost half the size of what it used to be. While it might not seem like much, each KB counts when people are downloading static files from your web server, so always remember to leave out the parts of Bootstrap that you do not need.

Note

Even though the custom tool has its limits, it is a very powerful tool, so feel free to experiment all you want.

Summary

Now you have learned why you should customize Bootstrap, how to generate your custom build, and how to leave out the parts of Bootstrap that you do not need.

In this chapter, you customized Bootstrap by creating your own build and replaced Bootstrap in your project with the one from your new build to reduce its size.

In the next chapter, things will get exciting when you learn the basics of LESS and start customizing Bootstrap on a whole new level. Forget about traditional CSS, with LESS you can do so much more!