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.
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.
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:
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:
// Accent colors
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:
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:
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
Now we also need to make sure headings will use it. Back in variables.less we change this section
@headingsFontFamily: 'Cinzel', serif;
@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?Looks 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
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
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
to something like
.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 lookIt 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.