Chapter 4. Bootstrappin' Business

We've built our portfolio site and converted it to a WordPress theme. Now, it's time to flesh out our portfolio with some projects that demonstrate the range of our powers. Let's now turn to designing a complex business home page.

Take a moment to survey the home pages of successful businesses, such as these:

While each has its own approach, what these sites have in common is that they manage considerable complexity.

We can get a grasp of some common features by breaking the website down into three categories, as follows, based on regions of the page:

  • Banner/Masthead: This part contains the logo, main navigation with dropdowns, a secondary or utility navigation, and a login or register option
  • Main content area: This features a complex layout with at least three columns, if not more
  • Footer: This is filled with multiple columns of links and information

Let's demonstrate our ability to manage this degree of complexity. To do so, we will take full advantage of Bootstrap's responsive 12-column grid system.

Here is the design we'll create, when viewed in medium and wide viewports:

Bootstrappin' Business

In narrow viewports, it will adapt considerably, as shown in the following screenshot:

Bootstrappin' Business

After that, we will perform the following steps:

  1. Begin with a set of starter files based on the Portfolio project from Chapter 2, Bootstrappin' Your Portfolio.
  2. Create a complex banner with the logo above the navbar and a utility navigation in the far top-right corner—in desktop viewports.
  3. For smaller viewports, we'll enable our utility options to appear only as icons atop the collapsed responsive navbar.
  4. Implement a business-style color scheme.
  5. Make adjustments to both the responsive and desktop versions of the navbar.
  6. Set up complex multicolumn grids for the main content and footer areas.

First things first. Let's size up our project starter files.

Sizing up our beginning files

As with all the projects in this book, the beginning files for this project be downloaded from the Packt Publishing website at http://www.packtpub.com/support. You'll find the files for this project in the folder 04_Code_BEGIN.

These files are based largely on our results from Chapter 2, Bootstrappin' Your Portfolio. Thus, we have the benefit of these key components:

  • Bootstrap LESS and JavaScript files, which have been organized in the following directories:
    • less/bootstrap: This contains Bootstrap's LESS files
    • js/bootstrap: This contains Bootstrap's individual plugins
    • js/plugins.js: This contains all Bootstrap plugins in minified form
  • The HTML5 Boilerplate along with the following files:
    • The basic markup structure of index.html
    • js/vendor/modernizr-2.6.2.min.js
    • js/vendor/query-1.10.2.min.js
  • The respond.js file for Internet Explorer 8 compatibility:
    • js/vendor/respond.js
  • Font Awesome font icons, including the following:
    • Icon fonts in the fonts directory
    • LESS files in the less/font-awesome directory

In addition to these key assets, we have some of the custom LESS touches we created during the project in Chapter 2, Bootstrappin' Your Portfolio. They can be found in the following files that are present in the less directory:

  • __main.less: This is based on bootstrap.less, customized to import Bootstrap's LESS files from the less/bootstrap directory as well as Font Awesome font icons and our custom LESS files
  • _carousel.less: This is based on Bootstrap's carousel.less file and has custom touches on the carousel padding, background, and indicators
  • _footer.less: This contains styles for the layout and design of the logo and social icons
  • _navbar.less: It is based on Bootstrap's navbar.less file and has adjusted padding in the .navbar-brand class to enable the navbar logo to fit
  • _page-contents.less: It contains styles to ensure that columns with floated buttons clear one another in narrow single-column layouts
  • _variables.less: It is based on Bootstrap's variables.less file and has custom versions of gray and some adjustments to variables for the navbar and carousel

Tip

If desired, you could choose to follow the steps for this exercise with a fresh download of Bootstrap's assets. You'll simply need to use Glyphicons rather than Font Awesome icons. You'll lack the custom styles from these files, but you can adjust and adapt your own approach.

I've sought to indicate the customizations I've made to files copied from Bootstrap with single-line comments—commenting out a line or adding comments such as // edited or // added.

Next, let's examine the content provided in the index.html file, as I've set it up to give us a running start. Open it in your browser, and you should see this in desktop width:

Sizing up our beginning files

Note the following features:

  • A complex navbar that has seven main nav items, each with a dropdown
  • The first of the three columns is equipped with a carousel, followed by a heading, paragraph, and button
  • The second and third columns that have headings, paragraphs, and Read more -> buttons
  • A footer that has the logo and social icons

You'll recognize elements we've already worked with in Chapter 2, Bootstrappin' Your Portfolio. The carousel is now smaller—constrained by its containing column. Otherwise, the markup is the same.

One wrinkle is that I've used the excellent holder.js JavaScript plugin to dynamically generate placeholder images for our carousel. If you examine the markup, you'll see near the bottom of the page that I've included the holder.js script right before plugins.js, as follows:

<!-- Holder.js for project development only -->
<script src="js/vendor/holder.js"></script>

We won't be using placeholder images in our final production site, so it makes sense to link it separately with a prominent comment.

With holder.js in place, we can conveniently build image tags that reference holder.js as their source. The remainder of the pseudo-URL specifies dimensions, color, and filler text, as follows:

<img src="holder.js/600x480/auto/vine/textmode:literal" alt="Holder Image">

For more information about holder.js, consult the documentation at https://github.com/imsky/holder.

With these elements in place—and thanks in particular to Bootstrap's ready repertoire of styles and behaviors—we're starting out in good shape. Let's get to the details.

First, we'll reposition our navbar within a more complex banner design.

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

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