Bootstrap Site Blueprints: Without Bootstrap your web designs may not be reaching their full potential. This book will change that through a series of hands-on projects covering everything from custom icon fonts to JavaScript plugins.

We've thrown together a couple of home page mock-ups. Though we have in mind what we want for large screens, we've begun with a handheld screen size to force ourselves to focus on the essentials.

You'll notice the following features:

Here is the design mockup as shown in the following screenshot:

Altogether, this should provide a good introduction to our work. The carousel is tall enough to give a good amount of visual space to our portfolio images. It is not difficult to navigate quickly to the content below, where a user can efficiently scan key options for taking a next step inside. By presenting key links as nice big buttons, we will establish helpful visual hierarchy for the key action items,...

Let's survey the beginning files for this exercise, which you will find in the folder 02_Code_BEGIN. You'll see files similar to the template we set up in Chapter 1, Getting Started with Bootstrap.

There are a few new additions:

Other than the navbar, which we set up in Chapter 1, Getting Started with Bootstrap, no Bootstrap classes have been added to style the carousel, columns, or icons yet. You can view the results in your browser.

You'll see the navbar, followed by the portfolio images:

The blocks...

Let's get started with our carousel, which will rotate between four featured images from our portfolio.

Bootstrap's carousel markup structure can be found in its documentation pages at the following URL:

http://getbootstrap.com/javascript/#carousel

Following the pattern used in the example, we'll begin with this structure to set up the fundamental element. This will contain all parts of the carousel, followed by the progress indicators:

<div id="homepage-feature" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
    <li data-target="#homepage-feature" data-slide-to="1"></li>
    <li data-target="#homepage-feature" data-slide-to="2"></li>
    <li data-target="#homepage-feature" data-slide-to="3"></li>
  </ol>

Note that I've used a div tag with an ID (id="homepage-feature") to establish the fundamental context of carousel...

We have three blocks of text, each with a heading, a short paragraph, and a link. In screen sizes of approximately tablet width or more, we would like this content to be laid out in three columns. In narrower screen widths, the content will organize itself in one full-width column.

Take a moment to visit and read the documentation for Bootstrap's mobile-first responsive grid. You can find it at http://getbootstrap.com/css/#grid.

In short, the grid is based on a twelve-column system. The basic class structure allows us to use a class of col-12 for full-width, col-6 for half-width, col-4 for one-third width, and so on.

With Bootstrap 3, thanks to the creative use of media queries, Bootstrap's grid can be very adept. Recall that we want our welcome message to have a single-column layout up to tablet-sized screens, and then adapt a three-column layout at approximately 768px. Conveniently, Bootstrap has a built-in breakpoint at 768px, which is the default value of its...

Turning our key content links into visually effective buttons is straightforward. The key classes we'll employ are as follows:

Add these classes to the link at the end of each of our three content blocks:

<p><a class="btn btn-primary pull-right" href="#">See our portfolio</a></p>

Save and refresh. You should see the following result:

We've made great progress. Our key elements are taking shape.

With our fundamental markup structure in place, we can start working on the finer details. Getting there will require some custom CSS. We're going to approach this by leveraging the power of Bootstrap's LESS files. If you're new to LESS, no worries! I'll walk you through it step by step.

In the following sections, we will be organizing, editing, customizing, and creating LESS files in order to generate the desired CSS for our designs.

In a nutshell, we may say that generating CSS using the LESS preprocessor is an exciting and freeing experience. The key benefits of working with LESS are discussed in the following sections.

.navbar-nav { ... }
.navbar-nav > li { ... }
.navbar-nav > li > a { ... }
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus { ... }

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...

Find the logo.png file in the img folder. You may notice that its dimensions are large, 900px wide. In our final design, it will be only 120px wide. Because the pixels will be compressed into a smaller space, this is a relatively easy way to ensure that the image will look good in all devices, including retina displays. Meanwhile, the file size of the image, which has already been optimized for the Web, is only 19 KB.

So, let's put it in place and constrain its width.

You may notice that the...

Now, let's adjust our nav items so that the text of our links shares the same baseline as our logo.

In _navbar.less, find the selector .navbar-nav. It is the parent ul of our navbar items. Within this set of rules, you'll find nested media queries. (See the documentation on nested media queries at http://lesscss.org.) The relevant lines are given as follows:

// Uncollapse the nav
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    margin: 0;
    > li {
      float: left;
      > a {
        padding-top: ((@navbar-height - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height - @line-height-computed) / 2);
      }
    }
  }

The variable @grid-float-breakpoint specifies the point at which the navbar expands to its full width or collapses to create the mobile-app-style responsive navigation. (You'll find this variable defined in _variables.less.)

At present, the padding-top and padding-bottom values are calculated to keep the text...

It's time to add icons to our navigation. We'll begin by employing the Glyphicons that come with Bootstrap. Then, we'll shift to the larger library of icons offered by Font Awesome.

You'll see the set of icons available and the markup convention for using these in your HTML using span tags and glyphicon classes. We'll start by adding a home icon to our Home nav item:

Font Awesome is a font icon set that offers 361 icons at the time of writing this book—twice as many as available in the current Bootstrap version of Glyphicons. Font Awesome icons are free, open source, and built to play nice with Bootstrap. You can see the Font Awesome home page at:

http://fortawesome.github.io/Font-Awesome/

Let's fold Font Awesome into our workflow.

You might note that the icons appear visually heavier than their adjacent text. The color is the same, but the icons carry greater visual weight. Let's adjust the icons to a lighter and less overpowering shade.

Our navbar, with the logo image, larger nav items, and icons, has grown in width. And a problem for our responsive design has arisen. Try resizing your browser window from wide to narrow (approx 480px) and back again, and chances are you'll see the navbar bump down under the logo at some point in the mid-range.

What's happened? The navbar has grown too wide for the container when our viewport is between 768px to 991px. This falls between the Bootstrap variables @screen-sm-min and @screen-md-min.

The @grid-float-breakpoint sets the point at which the navbar collapses. You'll find this variable in _variables.less, under the // Grid system section.

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-sm-min;

We need to adjust this breakpoint so that the navbar stays collapsed until the next breakpoint: @screen-md-min. Update the variable accordingly:

@grid-float-breakpoint:     @screen-md-min; // edited

Save, compile, and refresh...

We're going to take Bootstrap's default carousel styles and apply some significant customization. Let's create a copy of Bootstrap's carousel.less file and make it our own.

Now to begin customizing!

Let's fine-tune the blocks of content under the three headings Welcome!, Recent Updates, and Our Team.

First, let's add the arrow-circle icon to the button in each of these three blocks. Recall that we're using Font Awesome for our icon selection.

You should now have the desired icon in each of the three buttons.

While we're at it, let's add a bit of vertical padding between the carousel and this section of text. Right now, it's pretty tight.

The question that comes...

The biggest feature of the footer is our social icons. Font Awesome to the rescue!

Consulting the Font Awesome documentation, we find a slew of available icons under the category of Brand Icons. Here is the direct link:

http://fortawesome.github.io/Font-Awesome/icons/#brand

Now, we only need to replace the text for each social link in our footer with span elements, using the appropriate classes.

<ul class="social">
  <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
  <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
  <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
  <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
  <li><a href="#" title="GitHub Profile...

Let me strongly recommend at least one additional next step you'll need to take before taking a project like this to production. It's imperative that you take time to optimize your images, CSS, and JavaScript. These steps are not difficult.

Combined, these steps can cut the footprint of this website by roughly half....

Let's take stock of what we've accomplished in this chapter.

With this experience under your belt, you're equipped to bend Bootstrap to your will—using its power to speed website development, and then customizing the design to your heart's content. In future chapters, we'll expand your experience further. First, however, let's take this design and turn it into a WordPress theme.