As we work with Bootstrap's LESS files, we'll exert considerable control over them, including the following:

In other words, we'll be doing more than merely learning and applying Bootstrap's conventions. We'll be bending them to our will.

In this chapter's exercise files, open the less directory. Inside, you should see the following structure:

To prepare for what's ahead, I've given you a head start by adding a new layer of organization. All of Bootstrap's less files are now organized under the bootstrap subdirectory.

The file __main.less is a modified copy of bootstrap.less. This file imports all other files, and it is used in the compiling process to create one unified stylesheet from all of our imported LESS files. If you open __main.less, you'll see that at present it is very much like bootstrap.less, except that the import paths are updated to reach into the Bootstrap folder.

// Core variables and mixins
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";

Why go through this trouble? Because we'll soon be creating custom files of our own. When we do that, we can leave the Bootstrap folder and its files intact as they are, while making adjustments in the custom files that we will create.

You may wonder if there is a good reason for the two underscores at the beginning of this file name. In fact there are four good reasons:

Armed with this strategy, let us begin the customization! We'll begin by customizing Bootstrap's variables and adding a few new variables of our own.

Customizing variables

Let's move forward in the way we've begun. We'll create a copy of Bootstrap's variables file and customize it to our needs.

1. Find Bootstrap's variables.less file in the less/bootstrap folder, and open it in your editor.
2. Scanning through the lines of this file, you'll see variables used to set the CSS values for everything from basic colors to the body background, font-families, navbar height and background, and so on. It's beautiful to behold. It's even more fun to meddle with. Before we meddle, let's create our own copy of this file, allowing us to leave Bootstrap's default variables intact in case we ever want to revert back to them.
3. Save a copy of this file outside of the bootstrap folder in the main less directory, right beside __main.less. To mark this file as our own, add an underscore at the beginning, so that its name becomes _variables.less.

You should now have the following file scheme:

Next, let's implement our new color scheme.

1. In the topmost section of our new _variables.less file, you'll see the default Bootstrap variables for grays and brand colors. Note that the default set of grays is calculated in percentages of black, using the LESS lighten function:

   @gray-darker:            lighten(#000, 13.5%); // #222
   @gray-dark

2. We have the specific values that we're after. So, let's simply substitute our desired values. (Feel free to do the math if you prefer!) Then, we'll add an additional two variables to encompass the full range that we need.
3. The result is as follows:

   @gray-darker:            #222;
   @gray-dark:              #454545;
   @gray:                   #777;
   @gray-light:             #aeaeae;
   @gray-lighter:           #ccc;
   @gray-lightest:          #ededed;
   @off-white:              #fafafa;

Next, we'll update the @brand-primary variable under Brand colors. We'll adjust this to our gold hue:

// Brand colors
// -------------------------
@brand-primary:         #c1ba62;

To see the results, we'll need to import our new variables and compile the updated CSS.

Importing our new variables

We need to update __main.less to import our new _variables.less file.

1. In __main.less, find the line that imports the file bootstrap/variables.less. This is the first import, on line 12 of the file.
2. Update this line, so that it grabs our new _variables.less file instead. Remove bootstrap/ from the path, and adjust the file name with the leading underscore.

   @import "_variables.less";

3. Now, to compile to CSS—if you've not yet done it, add this new project to your compiler of choice.

   Tip

   Your compiler may need you to refresh its view of the files, so that it finds the new _variables.less file and adds it to the project. (CodeKit requires this.)

4. Select the file __main.less to compile. (If given the option, go ahead and minify and/or compress it while you're at it.)
5. Set the output path to css/main.css. (Recall that this is the file linked to index.html as its stylesheet.)

   Tip

   If your compiler makes it difficult to strip out the underscores for the compiled filename, simply add the underscores to the stylesheet link in the head of index.html.

6. Compile! Then refresh index.html in your browser.

If this is successful, the most noticeable change will be in the link color and buttons with the btn-primary class, which will both take the new @brand-primary color.

Editing navbar variables

Now, let's edit the variables that set the navbar height, colors, and hover effects.

1. In _variables.less, search for these variables and update them with the following values. These will expand the navbar height, employ our brand color for links, and make use of our other color variables where relevant.

   @navbar-height:                    64px;
   @navbar-margin-bottom:             0;
   ...
   navbar-default-color:             @gray;
   @navbar-default-bg:                #fff;
   @@navbar-default-border:            @gray-light;
   ...
   // Navbar links
   @navbar-default-link-color:          @navbar-default-color;
   @navbar-default-link-hover-color:    @link-hover-color;
   @navbar-default-link-hover-bg:       @off-white;
   @navbar-default-link-active-color:   @link-hover-color;
   @navbar-default-link-active-bg:      @gray-lightest;
   @navbar-default-link-disabled-color  @gray-lighter;
   @navbar-default-link-disabled-bg:    transparent;

2. Save your changes, compile, and refresh.

You should see the following new features in your navbar:

• It should grow 14px taller
• Its background color should turn white
• It should have a slightly darker bottom border
• Nav item backgrounds should darken slightly on hover
• The active nav item background should be a tad darker
• Link text should turn our brand-primary color on hover and when active, as shown in the following screenshot:
  

Now, let's put our logo image in place.