Mastering Magento Theme Design: Magento is the super-capable open source e-commerce platform that's number one for a reason. By using this book to optimize your know-how, you'll be acquiring the ultimate in e-tail expertise for yourself and your clients.

Bootstrap is a sleek, intuitive, powerful, mobile-first frontend framework that enables faster and easier web development, as shown in the following screenshot:

Bootstrap is the most popular frontend framework that is used to create mobile-first websites. It includes a free collection of buttons, CSS components, and JavaScript to create websites or web applications; it was created by the Twitter team.

First, you need to download the latest version of Bootstrap. The current version is 3.0. You can download the framework from http://getbootstrap.com/.

The fastest way to download Bootstrap is to download the precompiled and minified versions of CSS, JavaScript, and fonts. So, click on the Download Bootstrap button and unzip the file you downloaded. Once the archive is unzipped, you will see the following files:

We need to take only the minified version of the files, that is, bootstrap.min.css from css, bootstrap.min.js from js, and all the files from font.

Copy all the selected files (CSS files inside the css folder, the .js files inside the js folder, and the font files inside the fonts folder) in the theme skin folder at skin/frontend/bookstore/default.

Bootstrap is dependent on jQuery, so we have to download and include it before including boostrap.min.js. So, download jQuery from http://jquery.com/download/.

The preceding URL takes us to the following screenshot:

We will use the compressed production Version 1.10.2.

Once you download jQuery, rename the file as jquery.min.js and copy it into the js skin folder at skin/frontend/bookstore/default/js/.

In the same folder, also create the jquery.scripts.js file, where we will insert our custom scripts.

// This is important!
jQuery.noConflict();

jQuery(document).ready(function() {
   // Insert your scripts here
});

The following is a quick recap of CSS and JS files:

Now that we have all the files, we will see how to integrate them into the theme.

To declare the new JavaScript and CSS files, we have to insert the action in the local.xml file located at app/design/frontend/bookstore/default/layout.

In particular, the file declaration needs to be done in the default handle to make it accessible by the whole theme.

The default handle is defined by the following tags:

<default>
   . . .
</default>

The action to insert the JavaScript and CSS files must be placed inside the reference head block. So, open the local.xml file and first create the following block that will define the reference:

<reference name="head">
…
</reference>

A quick tip for our theme is to define the main template for the site in the default handle.

To do this, we have to define the template into the most important reference, root. In a few words, the root reference is the block that defines the structure of a page.

Let's suppose that we want to use a main structure having two columns with the left sidebar for the theme To change it, we should add the setTemplate action in the root reference as follows:

<reference name="root">
   <action method="setTemplate">
     <template>page/2columns-left.phtml</template>
   </action>
</reference>

You have to insert the reference name "root" tag with the action inside the default handle, usually before every other reference.

The header of our theme will look as shown in the following screenshot:

As you can see, there are three main sections that I will call the top header (the black line on the top), the main header (the white one), and the navigation bar.

To customize our header, open the header.phtml file located at app/design/frontend/bookstore/default/page/html and create the basic structure with the Bootstrap scaffolding. Our header file code will look as follows:

<!-- TopBar -->
<div id="topbar">
<div class="container">
<div class="row">
... 
</div>
</div>
</div>

<!-- Header -->
<div id="header">
<div class="container">
<div class="row">

</div>
</div>
</div>

<!-- Navigation -->
<nav>
. . .
</nav>

Let's discuss the preceding code in detail:

For the navigation bar, we can use the <nav> tag to wrap it up and make it responsive and ready with some tricks. Bootstrap helps us with the navigation component that we can integrate with a little help from jQuery.

In the header.phtml file, the navigation block looks as follows:

<!-- Navigation -->
<nav class="navbar navbar-default navbar-main" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand visible-xs" href="#">
<?php echo $this->__('Categories') ?>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="sr-only"><?php echo $this->__('Toggle Navigation') ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar...

The footer I designed for this theme is made up of two rows and two main columns in the first row. We will put the static contents such as the footer company's description, footer links, social links, and card image in CMS static blocks.

Hence, the user who manages the store can easily manage the footer from the admin panel. The final result will be similar to what is shown in the following screenshot:

All the links and the text in the footer are made of CMS blocks, so let's see the HTML structure. The footer file footer.phtml is located at app/design/frontend/bookstore/default/template/page/html/ like the header file.

The HTML code of the footer will look as follows:

<div class="row">
<div class="col-md-4">
<?php echo $this->getChildHtml('footer-company') ?>
</div>
<div class="col-md-8">
<div class="row">
<?php echo $this->getChildHtml('footer-cmslinks') ?>
<hr>
</div>
<div class="row">
<div class="col...

OK, now the header and the footer are complete! In the next chapter, we will develop our custom home page with the Bootstrap carousel, products in the home page, and some custom banners.

We've seen how to integrate Bootstrap and start the development of a Magento theme with the most famous framework in the world.

Bootstrap is very neat, flexible, and modular, and you can use it as you prefer to create your custom theme.

However, please keep in mind that it can be a big drawback on the loading time of the page. Following these techniques by adding the JavaScript and CSS classes via XML, you can allow Magento to minify them to speed up the loading time of the site.

In the next chapter, we will learn how to develop the home page with advanced techniques and how to create other custom pages following the basic principles of Magento's fall-back system.