O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

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

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 scss/includes_variables.scss 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 chapter5/finish files, you'll see we've carried these variables over from Chapter 5, Bootstrappin' Your Portfolio. They served us well there, and we'll make use of them again here:
     x` // ------------------------- @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: ...

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