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