Matt Lambert

Would you like to be a better designer & developer?
Sign up for my newsletter or check out my blog to start learning today.

Speed up Bootstrap Theming with a Library of LESS Variables

By admin on July 20th, 2014 in Bootstrap

If you love Bootstrap but get frustrated with the amount of work it takes to create a theme, you need to dive into LESS. It’s super easy to setup a library of LESS variables and mixins, include it in your base stylesheet, and use it throughout your CSS. The trick is to select a list of global properties that are regularly used throughout your theme. You want to consider things like: colors, backgrounds, typography, links, borders, margin and padding. Those seven categories make up a large percentage of the values that you regularly change in a stylesheet. If you can setup a relative system, using variables, then you only need to edit your library file and not the entire CSS theme.

Starting the Theme

Let’s start by creating some structure for our theme. Setup the file hierarchy as outlined below. For now, you can just leave the LESS files blank. In your index.html file, make sure you include all the necessary Bootstrap framework files, and make sure you include less.js to compile our LESS code in the browser.

index.html
css/
css/theme.less
css/components/
css/components/lib.less

lib.less

Pop open the lib.less file and we’re going to start entering in some variables. This file should only contain LESS variables and mixins. Don’t include any CSS selectors in this file. All of the CSS code should be contained within theme.less. Let’s start by defining a simple color palette.

// colors
@white: #fff;
@grey: #ccc;
@red: #c00;
@black: #000;

You’ll likely want to fill out your theme with additional colours, but this will do for now. Make sure you name your variables in a modular way. Avoid naming colors in a specific manner as shown below.

@header-background: #ccc;

The problem with that method is that it’s not reusable. If you want to use the same grey color for your footer, it doesn’t make sense to use it when it’s called @header-background. In the next step we’ll talk about defining background colours and we’ll use a variable for that, not an actual hex value.

Backgrounds

The next section I’m going to define is my backgrounds. I’ve named the below variables with descriptive labels like: primary, secondary, and inverse. This is done for a couple of reason. First, this language is mostly in line with how Bootstrap does their class naming. It creates a consistent experience and allows for less confusion, which translates into easier and quicker customization. The second reason I do this is because when you’re editing each component it’s easier to keep track of a primary background versus a secondary background, compared to a white background versus an off-white background. When you use the actual color names within your components you can very quickly lose track of what value you set. It’s much easier to think of it from a primary, secondary, or inverse frame of mind.

// Backgrounds
@primary-background: @white;
@secondary-background: @grey;
@inverse-background: @black;

You’ll also notice that for these variable values, I’m using another variable. Why didn’t I just use a hex number to define these values? Well, if I change grey from #ccc to #ebebeb, then I’d have to switch it in two places; the @grey variable above and the @secondary-background. I only want to change things in once place, not two. In this instance, if I were to change the value of @grey to something different, it will inherit down into all my other variables which is way cleaner and faster.

Typography

When I design a theme, I like to define two font faces or families. Like with the background variable names, make sure you name your typefaces in a modular fashion. Using a variable for typefaces can save you a ton of time because you don’t have to deal with a long string of font name values.

// Typography
@body-copy: helvetica, arial, sans-serif;
@header-copy: georgia, serif;

Now that we’ve setup variables for our font families, let’s move on to font-size and the other related type properties.

@heading-copy: @red;
@base-font-size: 16px;
@font-size: 1em;
@base-line-height: 1.5;

Setting your base-font-size here also makes sense because you can set it once and inherit it everywhere. Notice I’m also using a @font-size variable set to 1em. This will ensure my base font size across everything starts at 16px. The @base-font-size variable is really more of a configuration option. Converting it to ems will allow for easier operations in your component files. It’s also a good idea to declare your global line-height as a variable. To maintain a good vertical rhythm, you want consistent line height. If you need to chage the line height through your theme, you can easily do it in one place by tweaking the value of this variable. Finally, like we did with our backgrounds, let’s setup some modular names for font colors.

@primary-text: @black;
@secondary-text: @red;
@light-text: @grey;
@inverse-text: @white;

The key thing to remember is that you don’t want any actual values (pixel, hex, etc…) in your base theme or components. You only want to use variables. That way, in most cases you only need to update the lib.less file to create a new look and feel for your theme. It won’t be possible to completely eliminate all fixed values from all your component files, but you can reduce it to almost nothing.

Links

At the very least you need to setup the primary link states for your theme. Feel free to expand on this if you see yourself needing additional link styles.

// Links
@primary-link-color: @red;
@primary-link-color-hover: @black;

Borders

For the borders in your theme, you should define a primary weight, color and type. It’s also a good idea to define the border focus value here as it’s easier than tweaking it on your form styles. If you have multiple border values, you can declare additional variables. However, I’d recommend you try to keep it to one for consistency in your theme design.

// Borders
@border-color: @light-grey;
@border-size: 1px;
@border-type: solid;
@border-focus: @black;

Margin & Padding

Finally, let’s set some basic layout styles that can be reused through all our components. For this I’ve only defined a default margin and padding. The rest of your layout styles should live in your theme.less file and will likely be more specific. The advantage of using this technique is consistency. It is also really easy to use LESS operators to add or minus from the default values.

// Layout
@margin: 1em;
@padding: 1em;

Mixins

Mainly I use Parametric Mixins, which allow you to pass arguments. Why would you want to do this? Simple, CSS3 prefixes. We all hate having to prefix CSS3 properties. Using a mixin, you can set the prefixed properties once, and then use a keyword name to call them against a class or ID. Here’s a simple example of how to set a global value for border-radius.

// border-radius
.border-radius(@radius: 5px) {
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}

.round-corner-box {
 .border-radius;
}

.round-corner-button {
 .border-radius;
}

I think you can see how this is a much nicer way to deal with CSS3 prefixes. You should include your mixins in your lib.less file. That way, you can set a global value for all boxes, backgrounds, etc… that have a border-radius. If you want to change this value on all elements that use it, you simply change the pixel value in the mixin. That will save you tons of time compared to going through your entire theme and changing every instance of the border-radius property.

I’d recommend adding more mixins for all the CSS3 properties you plan to use in your theme. At the very least add in border-radius, box-shadow, transition, and box-sizing as these are used throughout Bootstrap. Your LESS library file is now complete. The last step is to import it into your base CSS theme. Pop open theme.less and add the following at the top.

@import “components/lib.less”;

Now insert all of your other CSS after the import rule. That way your variables can be inheritied throughout your other selectors. If you’re interested in learning more about using LESS in Bootstrap, I’d recommend picking up my book Mastering Bootstrap. In the book I go into more depth with LESS, build out an entire theme and style guide using the LESS variables we just setup. Thanks for reading and feel free to hit me up on Chapp.is if you have any questions.

Mastering Bootstrap – The complete guide to creating Bootstrap 3 themes. Learn More →