Having built our business home page, it's time to design our online store.
We'll build on the design from the previous chapter, adding a new page with the following elements:
- A grid of product thumbnails, titles, and descriptions
- A left-hand sidebar with options to filter our products by category, brand, and so on
- Breadcrumbs and pagination to ease navigation through our inventory
Take a few moments to visit websites like Zappos (http://www.zappos.com) and Amazon (http://www.amazon.com). Search or browse for products and you will see product grids with features similar to what we will be creating in this chapter.
When complete, we want our products page to look like the following screenshot on small, medium, and large screens:
On extra-small screens, we want our products page to adjust to the following layout:
Bootstrap gives us a big head start in accomplishing this design—after which we can use the power of LESS to refine things to completion.
You'll find this chapter's files prepared and ready in the folder 05_Code_BEGIN. This project builds directly on the completed design from Chapter 4, Bootstrappin' Business. If anything in these files seems strange, you may want to review Chapter 4, Bootstrappin' Business, before proceeding.
Tip
If you've not already downloaded the exercise files, you can find them at http://packtpub.com/support.
For this chapter, there is one new file in the main folder, products.html.
Open products.html in your editor to view the markup. Let's survey its contents.
The head, header, and navbar elements are consistent with what we've already seen in Chapter 4, Bootstrappin' Business. Inside the main role="main" element is where we'll find what's new. Here, you'll find the following elements in the same order as they appear:
- Breadcrumb links marked up as an unordered list
- A page title within an
h1heading - A series of options for filtering products
- Nine products with thumbnails, titles, descriptions, and a button
- An unordered list of pagination links just below the products and before the site footer
If you view the file in your browser, you'll see that much remains to be done. Breadcrumbs do not yet look like breadcrumbs, the filtering options look like a long series of bulleted lists, the layout of our product items is uneven (and in places broken), and so on.
Don't let these current imperfections worry you. These are the things that we'll be addressing in the following steps. Here is what's coming:
- We will apply Bootstrap's built-in styles to the breadcrumbs, page title, and pagination, and then customize them further
- We will improve the layout of the nine product items, innovating the Bootstrap grid system to maintain a visually well-organized grid across breakpoints
- We will style the filtering options by enhancing the layout and then using the Font Awesome icons to provide checkboxes
Now that we have a plan, let's get started!