And so finally we get to the last tutorial in the series, which will show you how to create custom color sets.
If you recall back at the beginning, when we were going through the major changes, I mentioned that the BS authors had provided an additional file to make BS3 look just like BS2, rather than using its flat look.
Throughout this series, we’ve used the default BS3 flat look, but if you download the prebuilt JavaScript version of BS3 from the Bootstrap website, you’ll find a new file inside the archive you download called bootstrap-theme.css.
If you link this file into your project immediately after your inclusion of the core bootstrap.css file, you’ll find that even though you’re now using the new BS3, the look and feel of your application still resembles BS2.
The authors realized that one of the main barriers to the adoption of BS3 in new applications was the inability to style it in a custom manner, but with ease.
If you were a user of LESS, or even Sass (as BS3 now has Sass bindings), then this wasn’t an issue. You simply opened up the LESS sources, tweaked the variables and Mixins you needed, and ran things through the LESS compiler to get your new CSS script.
Unfortunately, not everyone used LESS; in fact, many developers and designers only had the ability to download and include the plain old pre-compiled CSS and JavaScript files, so a better way had to be found.
The first change was opening up the entire Less sources to an in-page customization tool directly on the Bootstrap main site, but this isn’t a new thing; you were able to use this page before in a limited way. With BS3, however, the Less customization tool has had a complete overhaul, and you can now redefine everything that BS3 uses, from font sizes and typefaces, right through to grid sizes, trigger points, and basic contextual color sets.
In fact, there is now nothing that cannot be changed before you decide to download your new customized CSS, as the following image shows:
Because of the sheer size of the tool, it’s impossible to show the entire thing in this tutorial, but it’s easy enough to access. Simply go to the Bootstrap website and click Customize in the top menu bar. You’ll also see that you have many other options, such as which JavaScript plugins and toolkits to include, which components to include, and base style that you may not want.
For example, if all you want to use is the grid system, and nothing else, then you can simply select only the grid system, and unselect all the other components.
The BS3 site will then generate just the required code to include, and no more. This is a boon for those people who complain that all Bootstrap sites look the same, because it means that your site absolutely does not have to look the same as the rest—you can just use the bits you need, and use your own stuff for everything else.
There are two other ways you can customize your build. The first is to take the additional ’bootstrap-theme’ CSS style sheet, make a copy, and then change the styles as you see fit. This is not as easy as using the customization tools, but it’s also not as difficult as the alternative.
Most of the class names and settings that you’ll want to change to stamp your personal mark in BS3 are already separated out in the BS2 theme, so the quickest way to experiment is simply to put together a prototyping page with the main controls and elements you want to change, and then link in your copy of the BS2 theme.
If you’re using Node and something like Bower, it gets even easier, because you can use live reload, then just watch your sample page change in near real time as you tweak your custom version of the theme sheet.
The second way is slightly more involved, and as described in the BS3 docs, comes in two flavors: light customizations and heavy customizations.
An example of a light customization is adding a contextual color class to the button element. For example, if you wanted to add btn-sky alongside the btn-info, btn-primary, etc. classes, you might define a single style sheet to hold the following rules:
.btn-sky, .btn-sky:hover, .btn-sky:active
{
color: #000000;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 2);
background-color: #AAD4FF;
border: 1px solid black;
}
.btn-sky
{
background-repeat: repeat-x;
background-image: linear-gradient(top, #00FFFF 0%, #FFFF00 100%);
}
.btn-sky:hover
{
background-position: 0 -10px;
}When added and linked in correctly, it should look something like this:
When used with a normal button tag in the following manner:
<button class="btn btn-sky">My Sky Button</button>
The hardest part of using this method is going through the base CSS style sheets to find the names you wish to override; it’s not exactly difficult, just long-winded.
Once you have one such as the button above, or you’ve found and copied out an alert, panel, list, or other class, then you can easily make a template that can be reused whenever you want to add a custom class of that type.
Heavy customizations are not very different from light customizations; the major difference is that you override the entire class.
So, for example, you find all the classes related to btn, copy them, modify them, and include them separately.
The new architecture inside the BS3 framework now means that once you know the target selectors, and their siblings, creating an override is easy. As I’ve already pointed out, the bootstrap-theme file already contains much of what you might want to modify anyway, and if that’s not an option, then try sites such as Bootswatch.com:
Many others have thousands of themes to choose from, both free and paid for, so there’s no excuse for your Bootstrap site to look the same as everyone else’s.
Conclusion
I hope you enjoyed this series and that it helps you become a better developer using Bootstrap 3. In this new world of responsive web design, BS3 is a framework that shouldn't be taken lightly—it represents a lot of research by one of the biggest social media companies in existence, and is used to power most of their public-facing sites.
If you'd like to reach out and ask me any questions about the book, I can generally be found hanging about on Twitter as @shawty_ds. You can also generally find me on LinkedIn, or in the Linked.NET (Lidnug) users group that I help run there.
Until next time, keep calm and carry on bootstrapping.
This tutorial represents a chapter from Bootstrap 3 Succinctly, a free eBook from the team at Syncfusion.
