O'Reilly logo

Bootstrap Site Blueprints Volume II by Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting up the Less variables

Now that we've finished our layout, it's time to move on to updating our Less variables. For this project, I'm not going to add any new colors. We're going to fall back to the colors from our original boilerplate. I want to give you a good example of how it's useful to have these stock colors for use on a project.

Background colors

Let's start by updating our background colors to use our boilerplate color values. As you'll see, I'm using @black for the primary background. This is because we're going to make this a dark colored design:

@primary-background: @black;
@secondary-background: @dark-grey;
@inverse-background: @white;

Text colors

Next, let's update our text colors and invert them to be readable on a dark background: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required