Customizing Bootstrap

Most people doing websites from time to time should already know the wonderful CSS Framework Bootstrap by now. Neverland, the theme project we use on a lot of KDE sites these days is also based on it, and i really like it a lot. It makes use of Less CSS, which makes editing and updating the CSS a charm.

Actually, i find it quite often when surfing the web. And that is the point of this post. I do notice it quite often, as many people seem to just put it on their website without any adjustments, just as is. And to draw the connection to KDE, i have noticed that on some small KDE app sites as well.

But why not give it a unique look and still benefit from the great predefined classes bootstrap offers? Shouldn’t take a lot of time. Let’s have a look.

Prerequisites

First, as i already said, Bootstrap uses several less files which finally get “compiled” into a single CSS file. And that is my personal favourite for working with Bootstrap. So i would recommend going to their github page and cloning the repo, as the download doesn’t have the corresponding less files, just the final CSS (and Javascript, if wished). If you cloned it, you will also get a folder called “less”. That is where the magic happens.

But another thing you would need is either the less.js file (for client side rendering of less files) or the less module for node.js. I won’t digg into this, just follow the links above to get an idea what fits best in your situation. For the sake of this tutorial i will use the former method and use client side rendering as long as we are going through it.

Planning

Of course we need a rough idea on what we want to reach. In this case i am thinking of what comes to my mind when i usually read tutorials. Coffee. Coffee and newspapers (or newsreaders). This means some typewriter like font, some brown, milky and smooth colors. We keep that in mind for later.

Let’s get started

We take one of the Bootstrap example files to work with. I decided to use “marketing-narrow.html” from the docs/examples folder. The default look is like this:default_example

Back to our less files from Bootstrap. The most important files are bootstrap.less and variables.less. The former is responsible for loading all the single less files into the final output. The latter holds the most common variables for the entire look of Bootstrap and should be your first stop to get used to Bootstrap.
And right on top we have some common color codes we could adjust. The defaults are:

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;

// Accent colors
// -------------------------
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #46a546;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;

Now remembering our initial idea to have something newspaper like, i think we should make the white a bit less white, and the black a bit less black ;) And maybe add some yellow to it. That means changing @white to something like #f4f4eb and @black to something like #232322.

Note: This is just an example, use whatever values you prefer

A generic customisation of the grays could be:

@black:                 #232322;
@grayDarker:            #3c3c39;
@grayDark:              #42423f;
@gray:                  #60605c;
@grayLight:             #83837e;
@grayLighter:           #c8c8c0;
@white:                 #f4f4eb;

These values will be used across most of the Bootstrap components already. But before previewing that, let’s also adjust the font for the headings. I like the use of font loading, so let’s see if we can find a good font online.

For including a webfont we also need to adjust bootstrap.less, and we use the @import method here. The top of bootstrap.less should now look like:

@import url("http://fonts.googleapis.com/css?family=Cinzel");

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

Now we also need to make sure headings will use it. Back in variables.less we change this section

@headingsFontFamily:    'Cinzel', serif; 
@headingsFontWeight:    normal;  
@headingsColor:         inherit; // empty to use BS default, @textColor

That’s enough to change all headings on every subsequent page we will publish. How does it look at this point?default_example2Looks like we are getting there, no? Already looks more unique. And we only altered 10 lines so far.

Now let’s see what we can do with the builtin mixins of Bootstrap. Looking through the mixins.less file we notice

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

Using this we could easily add drop shadows to elements with one calls that outputs all the necessary vendor prefixes.
I think the buttons would look nice with a drop shadow, don’t you think? They already have one, but not like what i prefer. Opening up buttons.less we can change

.btn {
...
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
...

to something like

.btn {
...
.box-shadow(0px 2px 3px 1px fade(@black, 50%));
...

This quick change shows also the magic of editing less files instead of plain CSS. We replaced a hardcoded color value with the global variable @black, but not only that. We also run the lesscss function fade() on it, which returns a rgba value of the color you provided.
Now, every time we think the black color doesn’t satisfy our needs, we change it in one place and all other references get updated as well. Hardly possible with simple CSS.

So, let’s have a last lookdefault_example3It is up to you to decide if this looks good (probably not). But the point was to show how simple it is to get a unique look while using a CSS Framework like Bootstrap. The limits are up to you.

To summarize: 11 lines changed, less than half an hour, new custom look. Hope that helped.

Now i wonder what i should write next, maybe dig more into bootstrap? How to implement Bootstrap in e.g. WordPress, Mediawiki? Give some more insight into Neverland, a highly customized Bootstrap variant?

Your choice, let me know in the comments.

Cheerio,

Ingo

10 thoughts on “Customizing Bootstrap”

  1. Cool tutorial, and nice style. You know what, I am thinking about possibility of porting of some features of Bootstrap to QML.

    1. Thanks. Yeah, i also remember some blogposts by you about the awesome font, which sadly got removed from bootstrap. If you need some feedback or input, feel free to poke me :)

  2. For websites where the content is more important than the form, having a sane and recognizable layout can help readers to focus on what they are reading instead on the appearance of the website.
    This is why I prefer to read my favourite sources in Google Reader instead of fancy browser-extension-aggregator that embed the style of the website in the reading experience.
    That said, bootstrap can be customized in a heavy manner, making it unrecognizable but still maintaining its functions and portability. For example you won’t say that this site I’ve been working on is bootstrap based. And here visual impact matters much more than the content.

      1. no problem, fixed :)

        You are of course right with what you say, it always depends on the content. But this post is just intended for those who are just too lazy for customizing or think it might be a big deal.

    1. usually i prefer to indeed keep additions in its own file. However, i for myself prefer to change global vars in the bootstrap file, to reduce redundancy. And if you are used to diff tools (and some memory of yourself :D ) then it is easy to update the variables.less file.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>