Extending Bootstrap (2014)
Chapter 9. Creating Your Own Theme
Theming is an important part of customizing Bootstrap, so it is important that you learn to make your own themes in order to customize Bootstrap more efficiently. Next, you will learn why you should focus on creating original themes and how you can actually do this.
Why create a theme?
You should always try to package your customizations to Bootstrap as a standalone theme if you are working on something larger than a prototype. When you separate your theme from the rest of your styles, you can easily create more themes for the same project and re use your theme in multiple projects.
The following are some reasons why you should create your own themes:
· Easier to maintain: Separating your theme styles from the rest of the styles is a technique for applying a separation of concerns in your styles, and in doing so, you will find it much easier to extend and maintain your styles.
· Standardization: Even though Bootswatch themes are not standard, they all have the same structure and you can use this structure in all of your themes to come as close to a standard as possible.
· Reusability: When you separate your theme-specific styles from your other styles, you can easily copy a theme from one project to another, and better yet, you can even contribute your theme to Bootswatch.
· Exclusivity: Bootstrap is built with theming in mind, so there is really no reason to not separate your styles. That said, always try to create themes for your projects.
Next, we will create a theme for your Bootstrap project that separates the theme from the rest of the styles.
Creating your own Bootstrap theme
We will use Bootswatch to create our theme. You should already be familiar with Bootswatch because we used a readymade Bootswatch theme to theme our Bootstrap project earlier in this book.
Let us create a new theme. We we will name it Greenhorn and move the theme-specific styles and variable overrides there by performing the following steps:
1. Create a new folder under the less directory named greenhorn.
2. Create a new LESS file named bootswatch.less in the greenhorn directory and add the following contents to it:
3. // Greenhorn 1.0.0
4. // Bootswatch
5. // -----------------------------------------------------
6.
7. // Navbar =====================================================================
8.
9. // Buttons ====================================================================
10.
11.// Typography =================================================================
12.
13.// Tables =====================================================================
14.
15.// Forms ======================================================================
16.
17.// Navs =======================================================================
18.
19.// Indicators =================================================================
20.
21.// Progress bars ==============================================================
22.
// Containers =================================================================
Tip
You can use this template as a starting point for your bootswatch.less file in all of your themes in the future.
23. Move the following styles from custom-theme.less to bootswatch.less:
24.// Indicators =================================================================
25.
26..label {
27. border-radius: 0;
28.}
29.
30......
31.
32.// Containers =================================================================
33.
34..container .jumbotron {
35. border-radius: 0;
}
36. Move custom-variables.less to the greenhorn directory and rename it to variables.less.
Now that you have created your theme, you can move the rest of the styles from custom-theme.less to main.less and remove custom-theme.less completely.
Congratulations! You have created you first Bootswatch theme! While it may not seem like much, it is a great starting point for your custom theme.
The sky's the limit! Use your imagination and create the most amazing themes. Next, you will learn how to package your theme using Bootswatch and how to share it.
Publishing your theme
Now that you have created a neat new theme for Bootstrap, you must be eager to let the world see your amazing theme. Before we can do this, you need to learn how to build your theme using Grunt. Let us set up the Bootswatch project by performing the following steps:
1. Download Bootswatch from GitHub or clone it using Git by visiting https://github.com/thomaspark/bootswatch/.
2. Once you have created your own copy of the Bootswatch project, you need to run the following command in the Bootswatch project root:
npm install
This will install all the necessary Node.js dependencies so that you can run its Grunt tasks.
3. Copy the greenhorn directory into the project root and run the following command to build your theme:
grunt build:greenhorn
This will create two new files in your theme directory, bootstrap.css and bootstrap.min.css, which contain all of the Bootstrap files and customizations in your theme.
When you have built your theme, it will contain the same files as all other Bootswatch themes. If you think that your theme is good enough, you may want to consider contributing it to the Bootswatch project by doing a pull request on GitHub or selling it onWrapBootstrap (https://wrapbootstrap.com/).
Tip
If you are unfamiliar with pull requests and want to learn more about them, you should read the following page from the GitHub documentation at https://help.github.com/articles/creating-a-pull-request.
Summary
You have now learned how to create your own theme with Bootswatch, which separates your theme styles from other styles and allows you to re use your theme in your other projects.
In this chapter, you created the Greenhorn theme by refactoring the styles in your Bootstrap project to follow Bootswatch conventions and learned how to share your theme.
Good job! You have finished the last chapter in this book and now have everything that you need in order to become a master at customizing Bootstrap and build awesome projects with Bootstrap.
I hope you enjoyed reading this book as much as I enjoyed writing it!