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:

@primary-text: @white;
@light-text: @dark-grey;
@loud-text: @white;
@inverse-text: @white;
@heading-text: @light-grey;

Link colors

The same inverse color approach will be used to set the values for our links:

@primary-link-color: @light-grey;
@primary...