Twitter’s Bootstrap has a standard tool to work with if you want to push an app out as fast as possible and want to have a clean familiar UI that does not take weeks to develop. I wrote previously about customizing bootstrap in haste and have decided to expand on my bootstrap customization guide with a better step-by-step tutorial that designers and developers can follow alike.

Note that there are NUMEROUS tools out there that will help you speed up this manual process and they’re listed at the bottom (you can skip everything altogether by buying a pro theme). However, they do not offer the fine-grained approach my guide offers.

After numerous complaints from my last article, I decided to do thing a bit differently:

I shall attempt not to be rude during this article I’m building an example thus WILL provide an example I’ll be more thorough with explanation

Do we have that out of the way? Yes? Let’s start!

Finding The Right Colors

You’re not all designers and that’s fine; however, it makes picking colors much harder. I’ll describe two different methods of finding good colors for our theme. One of them involves manually picking colors, the other involves taking colors from an online repo of colors 😉

I think Color Scheme Designer is pretty badass and when I talked to the dev last year and he informed me of a 4.0 version coming, I was super excited. He gets hundreds of thousand of people every day and beyond that, it’s just an amazing tool.

Let’s dive into it. On the surface, CSD is just a programmable color wheel that works with many different settings. We can choose monochromatic, complement, triad, and other color settings. I don’t really want to get into color theory because that could take a long time but the basics of it are that using a color wheel and one of the settings, you’re more likely to hit colors that work together well.

I’ll use a cyan-like configuration:

Looks good! Keep in mind that we’ll probably use two or three of these colors max (if not just one!) and not all of them. Fortunately, boot theme (for example) has some cool presets that will take care of good color variation for us. In the top right, you can see a little note under the square with the colors that says “Scheme ID: number”. If you click on the number, a new window will open with a bookmarkable link that will lead you back to this scheme.

Now, some commenters didn’t like the results they got and thought the light page/dark page examples were even worse than they could imagine! Well, the light/dark examples are just GENERAL guidelines, so don’t listen to them. They may throw you off track.

Since I found this pretty cool color and I’m set on it, we can either skip to the BootTheme part or expand on this idea by searching Colourlovers and Kuler. If you’re a novice, just go with that. If you’re a pro, CL and Kuler may surprise you! 🙂

Using Colourlovers or Kuler

Colourlovers and Kuler are very similar sites in that they have repositories full of color palettes for all kinds of purposes. Got an app idea but no clue what colors would be best to use? Just search a keyword!

We’ll search for “cyan”, both sites will give us great choices and examples. Of course, it’d be much better if I could think of something cyan I’d want to imitate! Wikipedia has some great examples of “cyan” things but I came across this palette:

Now, we not only have a primary Cyan color which somewhat matches our color scheme designer result. It’s like a desaturated version of the top right color. The rest of the colors? We can use those for warnings and button colors! 🙂

Let me show you a few more searches/examples to reiterate the relative ease of finding good colors for your bootstrap theme.

Let’s say you have an app about gardening (real life example for my part), and you want to use very zen like colors. Search for “zen garden” and you’ll get some neat results:

Kuler gives you a great color scheme which has the brown-greys for rocks, and several greens resembling the foliage typically found in the zen garden. You can use these colors to visually connect a user to your product/service/blog topic.

What I decided On

I decided to use a monochromatic (one color) configuration using that nice cyan color from the “Coin Slot” color config. You can do as you please but for beginners, a single color works well.

For you more advanced folks, you’re welcome to mess around with the other colors but like I said before, BootTheme and Bootstrap are really great at using a single color to create derivations and plug them in.

BootTheme vs Twitter Customize

Many complaints I’ve heard were regarding this part. How are you supposed to know what variables do what? Hell, I honestly have no clue what most of those mean! Haha jk, well, it’s hard to know what the result will look like without some kind of a preview. That’s why we switch to boot theme.

There’s a downside to boot theme, however. BootTheme does not always use the latest version of Bootstrap but honestly, that’s not a big deal. They update/upgrade fairly often so whenever you see a new release you’d like to implement, check if BootTheme upgraded to it. If it did, you can easily import your existing vars and BootTheme SHOULD include new variables and parts.

Also note that BootTheme MAY freeze up on you (unfortunately). The best step forward is to change the layout to something else and change back. No changes will be reflected but your variables will stay in place . Update: They fixed any and all issues! 🙂

NOTE: Okay, so there are a few issues with BootTheme in terms of exporting. If you just export CSS you’re fine but you’ll be lacking responsiveness. The best approach is to build a theme in BootTheme (so you know what it looks like) and enter those values back to Twitter’s Customize screen to download the full package! It may add another 10 minutes of copy/pasting to your workflow but it is well worth it.

BootTheme

Let’s dive into BootTheme then:

Looks pretty standard. Let’s go over the details of BootTheme and it’s almighty power.

Design Page

In “Design Page”, you can paste in your own HTML code and work directly on top of it. So if you’re redesigning your current site that runs on bootstrap, you can just paste in the source code and get to work!

Layouts

BootTheme comes with three different layouts, the default showing you what’s in the screenshot, the demo layout showing all the elements in a slightly different fashion (one after another) and a blank layout that you can fill out by clicking on that neat icon left of the drop down.

You can also paste in the URL of a site you’re redesigning and going off that! 🙂

Screen Views

You can easily change the view of the layout from mobile to tablet and onward. This is great when you want to view what your site will look like on different devices. BootTheme does not natively include the responsive CSS bootstrap provides so you will not see the familiar collapsible navigation menu.

Finally, Variables

This is the part important to us. Quick tip. There are three buttons at the bottom of the variables bar “import”, “export” and “reset”. Basically, if you have your own custom vars picked out from before, you can import them. If you want to just get the variables from this experiment, click “export”. If you messed up beyond belief, click “reset”.

Let’s go over the customize toolbar:

Tabs: “Basic” includes the colors and different effects of your visual elements such as your navbar, hero unit, sidebar and so on. In “Advanced”, you can change up your grid and define a new place for your icon sprites. “Colors” will give you some cool colors to use and tells you to go to Color Scheme Designer or Kuler for ideas 😉 okay! But you can’t change anything in this tab section. “Fonts” tells you that you can easily import any google webfont.

“Basic” includes the colors and different effects of your visual elements such as your navbar, hero unit, sidebar and so on. In “Advanced”, you can change up your grid and define a new place for your icon sprites. “Colors” will give you some cool colors to use and tells you to go to Color Scheme Designer or Kuler for ideas 😉 okay! But you can’t change anything in this tab section. “Fonts” tells you that you can easily import any google webfont. Dice: The dice button will change up the colors of your theme randomly. Bored? Keep clicking till you find something good!

The dice button will change up the colors of your theme randomly. Bored? Keep clicking till you find something good! Scaffolding : You can change your main body background color and text color. Note, you can’t change the background image here

: You can change your main body background color and text color. Note, you can’t change the background image here Links : pretty obvious. Link color and hover

: pretty obvious. Link color and hover Typography : you’ll get to change stuff like font sizes, font families, heading colors, line heights etc. Note: you can simply paste in the name of a Google Web Font and it will be automatically imported

: you’ll get to change stuff like font sizes, font families, heading colors, line heights etc. Note: you can simply paste in the name of a Google Web Font and it will be automatically imported Tables: same deal. Background, background accent, hover (when you mouse over table rows), and border color

same deal. Background, background accent, hover (when you mouse over table rows), and border color Buttons : this one will make the most impact in my opinion.

: this one will make the most impact in my opinion. Navbar : here you can change the width the navbar will become “collapsed”, change the navbar height, background, hightlight (this will create a gradient), text color, link color, and all kinds of stuff. It’s a long list of very customizable variables

: here you can change the width the navbar will become “collapsed”, change the navbar height, background, hightlight (this will create a gradient), text color, link color, and all kinds of stuff. It’s a long list of very customizable variables Pagination : Got the basics of border, active, and background colors for our pagination

: Got the basics of border, active, and background colors for our pagination Hero Unit : same as elsewhere

: same as elsewhere Dropdowns : here you can mess with the different effects of the dropdown from the navbar

: here you can mess with the different effects of the dropdown from the navbar Forms: basic form stuff

basic form stuff Form states and alerts : whenever you use validation with bootstrap, it’ll give you a red/green or otherwise color to show if the input is correct. You can mess with the specifics here

: whenever you use validation with bootstrap, it’ll give you a red/green or otherwise color to show if the input is correct. You can mess with the specifics here Tooltips & Popovers : move customization!

: move customization! Miscellaneous: a “well” element background color and the color of the “horizontal rule” (hr element)

Phew. This seems like so much work to do! 🙂 Well, we’ll simplify it and be on our merry way with a badass theme!

Fonts

In my opinion, you should not stick with the default fonts. Luckily there are plenty of sites that offer great font stacks! Here are some suggestions:

Let’s Add Our Colors & Variables

We have our color list from ColourLovers, right? Let’s keep that because I like that list better than what we got at color scheme designer. Mainly because the spectrum has also has colors that may work for our alerts and because bootstrap uses LESS to transfigure your primary color into a myriad of brighter and darker alternatives that will be used throughout the theme.

With the coin slot theme, we have the following available colors:

FA2E59 – the pinkish color

FF703F – the orange color

F7BC05 – yellow

ECF6BB – light green

76BCAD – turquoise of sorts (azure or whatever) – MAIN COLOR.

So the main color will be our focus.