3. Layout

Flexible Boxes – next-generation CSS designed to create layoutsWhen we talk about layout in web design we usually mean page layout. Page layout is the part of graphic design that deals with the arrangement and style treatment of elements (content) on a page. A content management system like Joomla can have thousands of pages (or more) and it's very important to think about an arrangement of content elements that is readable on any type of screen.

A page layout can be easily drawed with a pencil on paper or by using a page layout software.

The hard part is to transform the planned page layout into HTML/CSS and integrate it into Joomla.

Joomla used layouts based on HTML tables for a long time. They are easy to create, they are working well for 80% of the use cases but it is semantically wrong to use HTML tables for a page layout. HTML tables should only be used for rendering data that belongs naturally to a grid, like in a spread sheet. A good example for the use of HTML tables is the periodic table.

A few years ago there was a big discussion about the topic "Table vs. CSS Layouts" (Tables: The Next Evolution in CSS Layout).

Layout in general is hard because it is about design!

Using Cascading Style Sheets (CSS) is harder compared to HTML tables because CSS offer so many possibilities to arrange your content. To get an overview about working with CSS, read carefully Learn CSS Layout.

Frameworks

If a task is hard, someone will create a framework to simplify it. In our case companies that provided templates for different content management systems needed frameworks to make their development work easier. In the Joomla world a few frameworks appeared (Gantry, T3, Warp, Phoca) but they were mostly tied to the products of that companies. Later we saw company independent frameworks still tied to Joomla (Construct, Morph).

Regardless content management systems, the need for frameworks was also high and a few results are Foundation, Bootstrap, and Skeleton just to mention a few.

Bootstrap in Joomla 3

Since Joomla! 3 the project decided to include the Bootstrap framework in the Joomla! core (Bootstrap Version 2.3.2). Bootstrap contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions and it was initially created and used by Twitter. After the decision to integrate Bootstrap in Joomla core, most of the frameworks mentioned above integrated Bootstrap in their own framework solution and added features on top.

It can be useful in certain cases to add another framework to Joomla 3. We want to make our first steps using the inbuilt Bootstrap framework.  

Page Layout with Bootstrap is easy!

It starts often with a two or three column design with a navigation on top and a footer below. People are used to a layout like that and we will create it now.

Grid system

Bootstrap offers a grid system with 12 columns (detailed documentation).

The two column layout would look like this

<div class="row">
  <div class="span12">navigation</div>
</div>
<div class="row">
  <div class="span4">first column</div>
  <div class="span8">second column</div>
</div>
<div class="row">
  <div class="span12">footer</div>
</div>

and the three column layout like this

<div class="row">
  <div class="span12">navigation</div>
</div>
<div class="row">
  <div class="span3">first column</div>
  <div class="span6">second column</div>
  <div class="span3">third column</div>
</div>
<div class="row">
  <div class="span12">footer</div>
</div>

Each column is represented through the "span" class. "span4" means, that four of the 12 columns are occupied by this element, "span6" occupies 6 element, and so on. Each column area has to be included in a "row".

Two column layout in index.php

I want to use this opportunity to introduce the term JFactory/getDocument. The whole Joomla page is a so called object or instance. This object consists of methods and attributes. An example for a method is the jdoc:include command we already used before. An attribute is the value of a variable, e.g. the value of language is "en-GB". If the page is in Spanish, it is "es-ES". To be sure to have the correct values of all the variables you use in the template, it is necessary to have these three lines in your index.php file.

$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;

When we combine the index.php in the last chapter with the bootstrap layout mentioned above we get this code (Listing 1).

<?php defined( '_JEXEC' ) or die;
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="<?php echo $this->language; ?>"
      lang="<?php echo $this->language; ?>"
      dir="<?php echo $this->direction; ?>"><head>
   <jdoc:include type="head" />
   <!-- Stylesheets -->
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/media/jui/css/bootstrap.css" type="text/css" />
</head>
<body>

<div class="row">
  <!-- navigation -->
  <div class="span12">
    <jdoc:include type="modules" name="position-1" style="none" />
  </div>
</div>

<div class="row">
  <!-- first column -->
  <div class="span4">
    <jdoc:include type="modules" name="position-2" style="none" />
    <jdoc:include type="modules" name="position-7" style="none" />
  </div>
  <!-- second column -->
  <div class="span8">
  <jdoc:include type="component" />
  </div>
</div>

<!-- second column -->
<div class="row">
  <div class="span12">
  <jdoc:include type="modules" name="footer" style="none" />    
  </div>
</div>     

</body>
</html>

Listing 1: index.php with two column layout

To fully integrate bootstrap we just have to call the bootstrap.css file in the HTML head tag.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/media/jui/css/bootstrap.css" type="text/css" />

The PHP variable  $this->baseurl contains the path of your Joomla installation.

After saving our website looks different. We created a layout with the help of the bootstrap framework (Figure 1)

EN chapter 3 001-two-column

Figure 1: Two column layout using bootstrap

Conclusion

As you have seen it is easy to create a layout with bootstrap. Play around with columns and rows to get familiar to the system. Place modules on various positions to see what happens.


In the next chapter which will be published September, 4th, we'll create a dropdown navigation menu and a few more features.

Section: 
Freetags: 

Comments

This is exactly what I'm looking for! Thanks for being so clear. I'll give it a try today.