Setting up the Less variables

As in our previous projects, the next step is to update our Less variables for our new project. Open _variables.less, which is located in /css/components. Let's go through each new part section by section.

Adding new colors

I've added a few new colors that I want to use in the project. Each of these colors is prepended with bw- so that we can easily identify that they are project-specific; bw- stands for Bootstrap wiki, if it's not obvious. Here are the new colors:

@bw-dark-primary: #00796b;
@bw-primary: #009688;
@bw-light-primary: #b2dfdb;
@bw-black: #212121;
@bw-grey: #727272;
@bw-light-grey: #b6b6b6;

You might notice a different naming convention here. I've changed it to use primary instead of the actual color name for the main color. This is simply to show you that there is more than one way to organize your colors and you don't have to do it the same way each time. For this project, there is one primary color, so it makes sense to use this type of naming convention...