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:
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:
In narrow viewports, it will adapt considerably, as shown in the following screenshot:
After that, we will perform the following steps:
First things first. Let's size up our project starter 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:
less/bootstrap
: This contains Bootstrap's LESS filesjs/bootstrap
: This contains Bootstrap's individual pluginsjs/plugins.js
: This contains all Bootstrap plugins in minified formindex.html
js/vendor/modernizr-2.6.2.min.js
js/vendor/query-1.10.2.min.j
s
respond.js
file for Internet Explorer 8 compatibility:js/vendor/respond.js
fonts
directoryless/font-awesome
directoryIn 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 carouselIf 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:
Note the following features:
nav
items, each with a dropdownYou'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.