Implementing the color scheme
We've been provided with a business-friendly palette of blue, red, and gray. Let's work these colors into our color variables:
Open
_variables.less
in your editor. We'll be working at the beginning of the file, in the color variables.Let's review the range of grays we have available. If you've begun with the
04_Code_BEGIN
files, you'll see we've carried these variables over from Chapter 2, Bootstrappin' Your Portfolio. They served us well there, and we'll make use of them again here.// Grays // ------------------------- @gray-darker: #222; // edited @gray-dark: #454545; // edited @gray: #777; // edited @gray-light: #aeaeae; // edited @gray-lighter: #ccc; // edited @gray-lightest: #ededed; // edited @off-white: #fafafa; // edited
Now, below the grays, let's fold in our new brand colors. We'll modify the value for
@brand-primary
and create an@brand-feature
variable for red:@brand...