Note: This tutorial was written for Blank Template 1.1.13 and can be carried out only with this version. You can read the current tutorial for 1.2.x in the ebook.

[deutsche Version] [versão em português] [руская версія]

Requirements

Things you need

Nice to have

Preview

In this tutorial you will learn how to use the Blank Template for building a responsive web design including Twitter Bootstrap. At the end your result should look like this:

Feel free to watch the demo online under http://jab12.blank.vc. So, help yourself to a good cup of tea or coffee and let's get started.

Preparation

Download the Blank Template [1.1.13]. Unzip and rename the folder in jab12. Then you edit the file templateDetails.xml and fill out all information. Change the file name of the language files (en-GB.tpl_templatename.ini with en-GB.tpl_jab12.ini) and the file name of the language files in the languages folder. Optional you can replace the pictures template_preview.png, template_thumbnail.png and favicon.ico. Please, zip the template folder and install your template through the Extension Manager in the Joomla backend. After successfully installing the template, go to the Template Manager and make it the default template. Now, if you go to your frontend, it should only display a blank, white page; the best starting point for the development.

Blank Template

To demonstrate the appealing web design of Blank Template, open the following files: template.css, tablet.css and phone.css in /templates/jab12/css (jab12 is the template folder). Copy the whole line with the body definitions in the template.css (body {...}) and also paste it in tablet.css and phone.css. Change the background-color in tablet.css in red and in phone.css in green (you can use the words red and green for color definition instead of hexadecimal colour codes). After saving the files and reloading the frontend you will see the effekt in your browser: The background color will switch from white to red to green by resizing the browser window from big to small. The support for desktops, tablets and phones works well.

Now, if you take a closer look at template.css you will see a section called 'floats'. Here you find the helper selectors to code. If you code the content and a sidebar in boxmodell, you can use the class float-left to place it side by side and define a div tag arround the class group for correct clearing.

<div class="group">
  <div id="content" class="float-left">
    <div class="incontent">
    
    </div>
  </div>
  <div id="sidebar" class="float-left">
    <div class="insidbar">
    
    </div>
  </div>
</div>

This works for all browsers. Put this line of code into the file index.php of your template (jab12) after <div class="inmain">. The content will be loading through the Joomla-API. In the div tag with the class incontent not only the system messages are loaded also all component (e.g. articles) output:

<jdoc:include type="message" />
<jdoc:include type="component" />

In the div tag with the class insidebar you include a module position named 'sidebar':

<jdoc:include type="modules" name="sidebar" style="xhtml" />

The module must be created in the file templateDetails.xml as well. Open the file and put

<position>sidebar</position>

inbetween <positions> and </positions>. After reloading the frontend you will see the word 'Home', the headline of your web site. Great! But, maybe you like to see more relevant information like this. In the backend, go to Content > Article Manager > Add New Article and write the title 'Blank Template Workshop' and the article text like this:

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Define it as 'featured' and save it. As we are here, we can also write a place holder (dummy text) text with the title 'Lorem Ipsum' and a text like the one above. This article will then be used for the menu entries.

You don't like the icons for print and email showing on each article in the frontend? The navigation 'Prev' and 'Next' sucks as well? Hide them in the Options of the Article Manager in the tab Articles. Set them to 'Show Navigation', 'Show Icons', 'Show Print Icon', 'Show Email Icon' and 'Show Hits' for hiding.

Now go to Extension > Module Manager and open the 'Login Form'. It is defined with a rather clumsy position tag called position-7. Give the positions unique and distinct names (sidebar, menu or header are good name conventions) and publish them on sidebar. Save and reload the frontend and you will find the article and the login form not displayed side by side as they have no defined width. The width you will have to define in the file template.css:

#content {width:720px;}
#sidebar {width:260px;}

after #main {} change the width of the #overall selector to 980px. Reload the frontend and you will see your content displayed side by side.

Twitter Bootstrap

For prototyping a web site you can simply use Twitter Bootstrap in Blank Template. Prototyping gives you the advantage to define the function of the web site in your browser. After this you can start designing. Form follow function.

Go to http://twitter.github.com/bootstrap, download the bootstrap and unzip it. Copy the two files bootstrap.css and bootstrap-responsive.css into css directory of your template (still jab12). To implement both files open template.css.php and include the following:

require('bootstrap.css');

before all css files and after all

require('bootstrap-responsive.css');

The reset sheet is no longer needed; so use a comment (#) to disable it.

#require('reset.css');

Save the file, reload the frontend and you will see how it works. Now you can use an appealing 12-column grid of bootstrap. Open the index.php and code a second class behind inmain called

 container

Be shure you set an empty space between both classes. Replace the class group with

row

and class float-left of content with

span8

and class float-left of the sidebar with

span4

After this step you will have to delete all definitions in template.css, tablet.css and phone.css. Don't worry if you leave them as empty files. Reload the frontend and minimise your browser (click and hold the right corner) and see how it works.

Menu & Search

To prepare the index.php for the Navbar of Twitter Bootstrap additionally write a class

container

behind inheader (with empty space between the two classes).

Navbar, response variation

Write the following lines within the div tag with the class inheader:

<div class="row">
  <div class="navbar span12">
    <div class="navbar-inner">
      <div class="container">
       
        <!-- .btn-navbar is used to toogle  collapsed navbar content -->
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
         
        <!-- Be sure to leave the brand out there if you want it shown -->
        <a class="brand" href="#">Project name</a>
         
        <!-- Everything you want hidden at 940px or less, place within here -->
        <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
        </div>
       
      </div>
    </div>
  </div>
</div>

These lines are just a matter of copy and paste from the docs of Twitter Bootstrap http://twitter.github.com/bootstrap/components.html#navbar except of the first element with class row and the additional class span12 of the second element. Everthing else is actually left untouched. But you will touch it right now.

Replace two words 'Project name' with

<?php echo $app->getCfg('sitename'); ?>

to display the sitename of your web site and the target '#' of the anchor (href) with

<?php echo $this->baseurl; ?>/

Note the slash! Then replace the comment

<!-- .nav, .navbar-search, .navbar-form, etc -->
with
<div class="pull-left visible-desktop">
  <jdoc:include type="modules" name="menu" />
</div>
<div class="insearch pull-right visible-desktop">
  <jdoc:include type="modules" name="search" />
</div>
<div class="hidden-desktop">
  <jdoc:include type="modules" name="menu" />
  <jdoc:include type="modules" name="search" />
</div>

What did you do? You created dublicate modules, one for the menu and one for the search. First, both modules are separated in div tags and only visible for desktops. Their class visible-desktop speaks for itself (further infos at Twitter Bootstrap docs). Second, both modules are combined in one div tag and hidden for desktops, which means they are visible for tablets and smart-phones. At this point don't forget to define the positions in templateDetails.xml the way you do it with the sidebar. By the way, the Twitter Bootstrap docs reads: The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.

Menu

Now we create a two level menu. Go to Menus > Main Menu (Joomla backend) and create new items to the single article 'Lorem Ipsum'. It should look like

It's time to publish the menu at the right position. Edit it under Extensions > Module Manager > Main Menu and publish it at the menu position. If you like to create a dropdown menu set 'Show Sub-menu Items' to Yes and write an additional class through 'Menu Class Suffix' named nav (don't forget the empty space!). Save it. Now you need a little bit of javascript to get it to work. First download these files:

Copy it to the folder js in you template directory. Open the file template.js.php and write

require('jquery-1.7.2.min.js');
require('bootstrap-collapse.js');
require('bootstrap-dropdown.js');

This will implement the files. Save it and open the file index.php of you template. At the bottom of the body (before </body>) write

<script type="text/javascript">
  (function($){   
    $(document).ready(function(){
      // dropdown
      $('.item-102').addClass('dropdown');
      $('.item-102 > a').addClass('dropdown-toggle');
      $('.item-102 > a').attr('data-toggle', 'dropdown');
      $('.item-102 > a').append('<b class="caret"></b>');
      $('.item-102 > ul').addClass('dropdown-menu');
      // divider 
      $('<li class="divider"></li>').insertAfter('.item-105');
    });
  })(jQuery);
</script>

Here you write the jQuery code to create the dropdown menu . Make sure the class with the item id is correctly defined. If you're not sure, look at the menu entry in the backend. The second entry should be separated from the third, so you write a divider aditionally. Reload the frontend to see it working. Note: The link of the single article 'About' doesn't work anymore.

Search

Offering a search function in the Navbar is a good thing and increases usability. The module position search is created but lacks its module. Create it in the Module Manager. Click 'New' and select 'Search'. Title and position should be search. Save it. In the frontend it will be displayed at the right place, but it doesn't look right. What you need now is an override of this module that you have just created.

Go to the folder html of your template, create a new folder in there and name it mod_search. Copy the files default.php and index.html from /modules/mod_search/tmpl/ to /template/jab12/html/mod_search/. Now you can write your own override by editing the file default.php, which is responsible for the output. Open it and create a class form-search for the form tag, the right markup of bootstrap (http://twitter.github.com/bootstrap/base-css.html#forms). The input tag with the id mod-search-searchword receive additional classes input-medium search-query. Write it after the existing class inputbox (empty spaces between the classes!) and when you are at the relevant line, delete the whole afore stated label markup. It would look good, if you would set it in your css file template.css.

.form-search {margin:5px 0;}

If you are writing in css, just define a margin for the body.

body {margin-top:20px;}

Yes, now it looks really good.

Breadcrumbs

Some markup for the breadcrumbs and it would increase the positive impressions of the visitors of your website. Write the following lines into the file index.php:

<!-- ***** BREADCRUMBS ***** -->
<div class="container">
  <div class="row">
    <div class="span12">
      <jdoc:include type="modules" name="breadcrumbs" />
    </div>
  </div>
</div>

Of course, the position breadcrumbs belongs to the file templateDetails.xml as well.

<position>breadcrumbs</position>

The Module Manager already contains a module for the breadcrumbs (if you didn't delete it). Now it can be published in the position breadcrumbs. Make sure that 'Show "You are here"' is set to No. After reloading the frontend the breadcrumbs don't look like the bootstrap way (http://twitter.github.com/bootstrap/components.html#breadcrumbs). Another override is needed. Do it the same way as you did it for the search. Create the folder mod_breadcrumbs in the directory html and copy the files default.php and index.html from /modules/mod_breadcrumbs/tmpl/ to /template/jab12/html/mod_breadcrumbs/. When you open the file default.php you will see, that the breadcrumbs are not packed in an unsorted list as the Twitter Bootstrap suggests. Write

<ul class="breadcrumb">

still after <div class="breadcrumbs<?php echo $moduleclass_sfx; ?>"> and close it with

</ul>

right before </div>. Now the anchors (a) and spans (span) belongs into list items (li)

Rewrite this

if ($i < $count -1) {
  if (!empty($list[$i]->link)) {
    echo '<a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a>';
  } else {
    echo '<span>';
    echo $list[$i]->name;
    echo '</span>';
  }
  if($i < $count -2){
    echo ' '.$separator.' ';
  }
}  elseif ($params->get('showLast', 1)) { // when $i == $count -1 and 'showLast' is true
  if($i > 0){
    echo ' '.$separator.' ';
  }
   echo '<span>';
  echo $list[$i]->name;
    echo '</span>';
}

with this

if ($i < $count -1) {
  if (!empty($list[$i]->link)) {
    echo '<li><a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a></li>';
  } else {
    echo '<li><span>';
    echo $list[$i]->name;
    echo '</span></li>';
  }
  if($i < $count -2){
    echo ' <span class="divider">/</span> ';
  }
}  elseif ($params->get('showLast', 1)) { // when $i == $count -1 and 'showLast' is true
  if($i > 0){
    echo ' <span class="divider">/</span> ';
  }
   echo '<li><span>';
  echo $list[$i]->name;
    echo '</span></li>';
}

Can you see the difference? It's all about opened (<li>) and closed (</li>) list items and a replacement for the separators with these dividers. Save it, reload the frontend and click on the title 'Blank Template Workshop' to see it in action.

Footer

Finally rewrite the footer in the file index.php from

<div id="footer">
  <div class="infooter">
    
  </div>
</div>

to

<!-- ***** FOOTER ***** -->
<div class="container">
  <div class="row">
    <div class="span12">
      <p>Copyright © <?php echo date('Y'); ?> - <?php echo $app->getCfg('sitename'); ?></p>
    </div>
  </div>
</div>

This will result in the output of the copyright character with the current year and the sitename.

Theme

Congratulations! You finished your first prototype template with Blank Template and Twitter Bootstrap and it looks great.

If you want to display it in another theme, you can go to http://bootswatch.com an look for a great theme. Maybe Amelia is the right one. Just download the file bootstrap.css and replace it with the file in your template directory in the folder css. Thats all, dude.

Conslusion

With the Blank Template and Twitter Bootstrap you can rapidly write a prototype of your website. Create a fully functional and responsive web design and if you don't like the default theme of bootstrapp, look for some other themes or see a designer and ask him to brush up the design.