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:

  1. Open _variables.less in your editor. We'll be working at the beginning of the file, in the color variables.
  2. 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
  3. 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-primary:          #3e7dbd; // edited blue
@brand-feature:          #c60004; // added new red
  4. Now, let's adjust our link hover color so that it will lighten (rather than darken) the @brand-primary color, which is already dark:
    // Links
// -------------------------
@link-color:            @brand-primary;
@link-color-hover:      lighten(@link-color, 15%);

Having set up these fundamental color variables, we're ready to work on our navbar.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset