Creating a Responsive Magento Theme with Bootstrap 3

Exclusive offer: get 80% off this eBook here
Mastering Magento Theme Design

Mastering Magento Theme Design — Save 80%

Create responsive themes using Bootstrap, the most widely used frontend framework with this book and ebook

₨1,814.99    ₨363.00
by Andrea Saccà | April 2014 | e-Commerce Open Source

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

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.

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

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:

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:

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:

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

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:

<!-- Removing the styles.css declared in the base theme --> <action method="removeItem"> <type>skin_css</type> <name>css/styles.css</name> </action> <!-- Adding Bootstrap Css --> <action method="addItem"> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet> </action> <!-- Adding the styles.css again --> <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:

<!--[if lt IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]-->

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:

  1. 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.

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

  3. 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"> <!-- Adding Javascripts --> <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> <!-- Removing the styles.css --> <action method="removeItem"> <type>skin_css</type><name>css/styles.css</name> </action> <!-- Adding Bootstrap Css --> <action method="addItem"> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet> </action> <!-- Adding the styles.css --> <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:

<div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-9"></div> </div> </div>

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.

Resources for Article:


Further resources on this subject:


Mastering Magento Theme Design Create responsive themes using Bootstrap, the most widely used frontend framework with this book and ebook
Published: April 2014
eBook Price: ₨1,814.99
Book Price: ₨3,024.99
See more
Select your format and quantity:

About the Author :


Andrea Saccà

Andrea Saccà is a web designer and a frontend developer based in the infamous, central area of Rome, Italy. He is also one of the first Magento Certified Front End Developers and he will be speaker to the first Meet Magento Italy 2014.

After his studies in Graphic and Web Design in Rome, he worked for a few renowned web agencies as a web designer, and in 2012, he started his freelance career. After two years of freelancing, he started his own web agency, 1604lab (www.1604lab.com) in Rome. You can visit the twitter page for his website at @1604lab.

He is a multiskilled web designer and a developer who specializes in creating an effective online presence for all kind of businesses, start-ups, and individuals, for customers all over the world.

Andrea is a passionate and hard-working individual with a strong ambition, and yes, he's a bit of a geek too! In his free time he likes snowboarding, playing guitar, going to the cinema, and drinking some beer with his friends.

You can follow Andrea on twitter at @andreasacca, and on his personal blog at www.andreasacca.it.

Books From Packt


Mastering Magento
Mastering Magento

Magento 1.4 Development Cookbook
Magento 1.4 Development Cookbook

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Instant E-Commerce with Magento: Build a Shop
Instant E-Commerce with Magento: Build a Shop

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

Instant Magento Shipping How-to
Instant Magento Shipping How-to

Magento Beginner’s Guide - Second Edition
Magento Beginner’s Guide - Second Edition

Magento 1.4 Themes Design
Magento 1.4 Themes Design


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software