In this article, by Andrea Saccà, the author of Mastering Magento Theme Design, we will learn how to integrate the Bootstrap 3 framework and how to develop the main theme blocks.

The following topics will be covered in this article:

An introduction to Bootstrap

Downloading Bootstrap (the current Version 3.1.1)

Downloading and including jQuery

Integrating the files into the theme

Defining the main layout design template

(For more resources related to this topic, see here.)

An introduction to Bootstrap 3

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

creating-responsive-magento-theme-bootstrap-3-img-0

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

Downloading Bootstrap (the current Version 3.1.1)

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 3 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:

creating-responsive-magento-theme-bootstrap-3-img-1

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.

For development, you can use bootstrap.css so that you can inspect the code and learn, and then switch to bootstrap.min.css when you go live.

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.

Downloading and including jQuery

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:

creating-responsive-magento-theme-bootstrap-3-img-2

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.

Magento uses Prototype as the main JavaScript library. To make jQuery work correctly without conflicts, you need to insert the no conflict code in the jquery.scripts.js file, as shown in the following code:

// This is important!jQuery.noConflict(); jQuery(document).ready(function() { // Insert your scripts here });

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

creating-responsive-magento-theme-bootstrap-3-img-3

Integrating the files into the theme

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:

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:

Declaring the .js files in local.xml

The action tag used to declare a new .js file located in the skin folder is as follows:

<action method="addItem"> <type>skin_js</type><name>js/myjavascript.js</name> </action>

In our skin folder, we copied the following three .js files:

jquery.min.js

jquery.scripts.js

bootstrap.min.js

Let's declare them as follows:

<action method="addItem"> <type>skin_js</type><name>js/jquery.min.js</name> </action> <action method="addItem"> <type>skin_js</type><name>js/bootstrap.min.js</name> </action> <action method="addItem"> <type>skin_js</type><name>js/jquery.scripts.js</name> </action>

Declaring the CSS files in local.xml

The action tag used to declare a new CSS file located in the skin folder is as follows:

<action method="addItem"> <type>skin_css</type><name>css/mycss.css</name> </action>

In our skin folder, we have copied the following three .css files:

bootstrap.min.css

styles.css

print.css

So let's declare these files as follows:

<action method="addItem"> <type>skin_css</type><name>css/bootstrap.min.css</name> </action> <action method="addItem"> <type>skin_css</type><name>css/styles.css</name> </action> <action method="addItem"> <type>skin_css</type><name>css/print.css</name> </action>

Repeat this action for all the additional CSS files.

All the JavaScript and CSS files that you insert into the local.xml file will go after the files declared in the base theme.

Removing and adding the style.css file

By default, the base theme includes a CSS file called styles.css, which is hierarchically placed before the bootstrap.min.css.

One of the best practices to overwrite the Bootstrap CSS classes in Magento is to remove the default CSS files declared by the base theme of Magento, and declare it after Bootstrap's CSS files.

Thus, the styles.css file loads after Bootstrap, and all the classes defined in it will overwrite the boostrap.min.css file.

To do this, we need to remove the styles.css file by adding the following action tag in the xml part, just before all the css declaration we have already made:

<action method="removeItem"> <type>skin_css</type> <name>css/styles.css</name> </action>

Hence, we removed the styles.css file and added it again just after adding Bootstrap's CSS file (bootstrap.min.css):

<action method="addItem"> <type>skin_css</type> <stylesheet>css/styles.css</stylesheet> </action>

If it seems a little confusing, the following is a quick view of the CSS declaration:

<action method="removeItem"> <type>skin_css</type> <name>css/styles.css</name> </action>  <action method="addItem"> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet> </action>  <action method="addItem"> <type>skin_css</type> <stylesheet>css/styles.css</stylesheet> </action>

Adding conditional JavaScript code

If you check the Bootstrap documentation, you can see that in the HTML5 boilerplate template, the following conditional JavaScript code is added to make Internet Explorer (IE) HTML 5 compliant:

To integrate them into the theme, we can declare them in the same way as the other script tags, but with conditional parameters. To do this, we need to perform the following steps:

Download the files at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js and https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js.

Move the downloaded files into the js folder of the theme.

Always integrate JavaScript through the .xml file, but with the conditional parameters as follows:

<action method="addItem"> <type>skin_js</type><name>js/html5shiv.js</name> <params/><if>lt IE 9</if> </action> <action method="addItem"> <type>skin_js</type><name>js/respond.min.js</name> <params/><if>lt IE 9</if> </action>

A quick recap of our local.xml file

Now, after we insert all the JavaScript and CSS files in the .xml file, the final local.xml file should look as follows:

<?xml version="1.0" encoding="UTF-8"?> <layout version="0.1.0"> <default translate="label" module="page"> <reference name="head">  <action method="addItem"> <type>skin_js</type> <name>js/jquery.min.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/bootstrap.min.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/jquery.scripts.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/html5shiv.js</name> <params/><if>lt IE 9</if> </action> <action method="addItem"> <type>skin_js</type> <name>js/respond.min.js</name> <params/><if>lt IE 9</if> </action>  <action method="removeItem"> <type>skin_css</type><name>css/styles.css</name> </action>  <action method="addItem"> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet> </action>  <action method="addItem"> <type>skin_css</type> <stylesheet>css/styles.css</stylesheet> </action> </reference> </default> </layout>

Defining the main layout design template

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.

Defining the HTML5 boilerplate for main templates

After integrating Bootstrap and jQuery, we have to create our HTML5 page structure for the entire base template.

The following are the structure files that are located at app/design/frontend/bookstore/template/page/:

1column.phtml

2columns-left.phtml

2columns-right.phtml

3columns.phtml

The Twitter Bootstrap uses scaffolding with containers, a row, and 12 columns. So, its page layout would be as follows:

This structure is very important to create responsive sections of the store. Now we will need to edit the templates to change to HMTL5 and add the Bootstrap scaffolding.

Let's look at the following 2columns-left.phtml main template file:

<!DOCTYPE HTML> <html><head> <?php echo $this->getChildHtml('head') ?> </head> <body <?php echo $this->getBodyClass()?' class="'.$this->
getBodyClass().'"':'' ?>> <?php echo $this->getChildHtml('after_body_start') ?> <?php echo $this->getChildHtml('global_notices') ?> <header> <?php echo $this->getChildHtml('header') ?> </header> <section id="after-header"> <div class="container"> <?php echo $this->getChildHtml('slider') ?> </div> </section> <section id="maincontent"> <div class="container"> <div class="row"> <?php echo $this->getChildHtml('breadcrumbs') ?> <aside class="col-left sidebar col-md-3"> <?php echo $this->getChildHtml('left') ?> </aside> <div class="col-main col-md-9"> <?php echo $this->getChildHtml('global_messages') ?> <?php echo $this->getChildHtml('content') ?> </div> </div> </div> </section> <footer id="footer"> <div class="container"> <?php echo $this->getChildHtml('footer') ?> </div> </footer> <?php echo $this->getChildHtml('before_body_end') ?> <?php echo $this->getAbsoluteFooter() ?> </body> </html>

You will notice that I removed the Magento layout classes col-main, col-left, main, and so on, as these are being replaced by the Bootstrap classes.

I also added a new section, after-header, because we will need it after we develop the home page slider.

Don't forget to replicate this structure on the other template files 1column.phtml, 2columns-right.phtml, and 3columns.phtml, changing the columns as you need.

Summary

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.