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.

Are You Theming Twitter Bootstrap The Hard Way?

By admin on April 1st, 2014 in Bootstrap

A common complaint I hear about Twitter Bootstrap is that all Bootstrap websites look the same. That’s a common misconception that can easily be dispelled by looking at a website like lovebootstrap.com. Comments like that either come from lazy designers and/or developers, or people that haven’t figured out a good strategy for theming Bootstrap. Yes, theming can be hard but if you set the right foundation, it can become much easier and dare I say enjoyable.

Use a code compiler

One trick to really speed up Bootstrap theming is to break your theme up into smaller, more manageable chunks of code. Instead of having one master CSS stylesheet, it’s much easier to break all your components into their own file. That way you can customize them one by one, which is much more manageable. It’s also easier to troubleshoot when things go wrong if you are working on the component level.

What you need to do is create a master stylesheet, let’s call it theme.css. Within that file include all the base semantic HTML tags. Below that, use the CSS @import rule to load in each component from a separate file. Once you’ve coded all the component files, you’ll want to compile them all into one CSS file for production.

There are a number of code compiling tools out there. Personally, I use Hammer for Mac and I love it. Hammer takes things a step further from a basic compiler and allows you to do things like HTML includes and variables. If you’re looking for something more lightweight, I’d recommend the LESS compiler for Mac or WinLess for Windows. Wait a minute, what do you mean LESS?

Use a CSS Pre-processor

If you want to speed up the theming process, you have to use a CSS Pre-Processor. Personally, I use LESS but many people like to use SASS. The reason I went with LESS is because it’s included with Bootstrap. Recently, a SASS port of Bootstrap has become available. You’re free to use whichever processor you like, just make sure you use one. If you’re unfamiliar with LESS, make sure you read up on the basics at their website. LESS extends vanilla CSS, adding features that allow variables, mixins, functions, and many other techniques.

Make sure when you are setting up your theme you rename your master file to theme.less. Also, name all your component files with the .less extension. One of the best techniques I follow when setting up my theme is to create a library LESS file and name it lib.less. Within that file you want to set properties for your most commonly used values. Make sure you name them very generally so they can easily be reused. Here’s some common things that I set in my lib.less file:

  • color palette
  • typefaces
  • base type sizes
  • base line-height
  • primary text styling
  • primary link styling
  • borders
  • margin
  • padding
  • mixins

The real power of the lib.less file is that you can set global values that can be reused throughout all your component .less files. For example, if you set your base margin to be 1em, @margin: 1em;, you can reuse the @margin variable name in all of your other .less files. This will provide way better consistency in your layout, while allowing you to change the global margin size in one place that will inherit through your entire theme.

Make sure the first thing you import into your master stylesheet is the lib.less file. It needs to be loaded first so that all the global properties you are setting can be inherited through the rest of your components that load later in the stylesheet.

Another thing that is good to include in your lib.less file are LESS mixins for CSS3 properties. LESS allows you to create parametric mixins which basically means you can apply multiple properties to a single keyword. Take this rounded corners code as an example:

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

This can be invoked like so:

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

Yep that’s it. Much nicer than having to enter all those CSS3 prefixes on every element that requires rounded corners. Crafting a lib.less file is really an art form and I encourage you to experiment with it to save yourself as much time as you can. Remember, you want to make your code as reusable as possible. That way it’s easier to maintain and quickly develop new themes.

Breaking your theme into components

One of the best ways to take the scariness out of theming bootstrap is to break your theme down into smaller pieces. You’ve heard me mention about breaking the theme into components. You may be asking, what components? A good starting place is the Bootstrap docs. If you examine the source code, you’ll notice that the class names follow the documentation. This is how you decide where to break things up. Also, don’t forget about the javascript, you’ll want to break those out too. Finally, if you want to add in a third party Bootstrap plugins, create a unique .less file for each of those. You should expect to have 30 or more component .less files when you are done.

Creating your own theme framework

Man this seems like a ton of hard work. I won’t lie, the first time you do this it will be a bit of work. However, you are creating your own theming framework that sits on top of Bootstrap and you can reuse it for future themes. When you are creating your first theme, keep the styling minimal so that you can easily build on it in the future. I did this with a theme I created called CardeoStrap.

When you are ready to setup a page template, make sure you load bootstrap.css first, then your theme after that. You want to use Bootstrap as the backbone of your website while having your theme customize only the stuff you want to change. Which reminds me, you don’t have to change every property line for line! That would really defeat the purpose of using Bootstrap. Let the framework do the heavy lifting and only change the properties you need for authoring your theme. This takes a little practice, but definitely get familiar with a website inspector like Chrome Tools or Firebug as they will really help with this process. Remember, CSS inheritance is your friend.

If you are new to creating themes for Bootstrap, hopefully this post will put you on the right path. If you’d like to learn more, I’m actually in the process of writing a book called Mastering Bootstrap. It dives deeper into this subject matter and teaches you how to sell your themes once you have created them. For more information, please check out the book’s page and sign up for my newsletter to receive updates.

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