In the index.php and the template.css stylesheet that comes with the Protostar Template for Joomla 3, there are multiple designations for the .span classes. These Bootstrap 2 classes are what allows for the responsive web design for the Protostar Template.

The 12 span designations for Bootstrap 2

The Bootstrap 2 style page is set up in 12 columns, .span1 uses one column, .span2 uses two columns, .span 3 uses three columns and so forth. There are 12 .span classes with .span12 using the full width. The template.css file also designates a certain percentage for gutter space as well.

The styling with Protostar for these span classes determines what percentage the element will take up of the containing element. 

If an element is assigned class="span1", it will take up 1/12 of the containing element (allowing for gutter space), class="span2" will take up 2/12, class="span3" will take up 3/12 and so forth. Instead of fractions, the template.css assigns percentages to each span class.

Protostar's index.php file

In Protostar's index.php file, the .span framework is set up for the entire site. If you look through the HTML, you will see set span classes assigned to different sections of the page.

The span class for the content area

The span class assigned to the content area, <main id="content">, will change depending on if any modules are assigned to position-7 and/or position-8. A variable of $span is declared in the PHP area. This value of this variable is determined with a series of if elseif statements that test if there is anything in position-7 or position-8. 

If there are no modules in position-7 or position-8, the content area is defined as <main id="content" class="span12">.

If there are one or more modules in position-7 but not in position-8, the content area is defined as <main id="content" class="span9">.

If there are one or more modules in position-8 but not in position-7, the content area is defined as <main id="content" class="span9">.

If there are one or more modules in position-7 and in position-8, the content area is defined as <main id="content" class="span6">.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span6";
}
    elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
    $span = "span9";
}
    elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span9";
}
    else
{
    $span = "span12";
}

If you look at the <body> portion of index.php, you will see only three places where elements are assigned a .span class.

<div class="row-fluid">

<div id="sidebar" class="span3">

<main id="content" role="main" class="<?php echo $span;?>">

<div id="aside" class="span3">

This is where you see that id="content" is assigned the $span that was determined in the <?php /> section.

Protostar's template.css file

For static layouts, on large screens, the containing <div> that encompases all the content is assigned class="container" which is set to a width of 940px with another call setting it to max-width: 960px. The <header> element is set to be as wide as the container. The <div class="row-fluid"> contains the right and left columns and the content area. The row-fluid div is set to be as wide as the container. So each of the columns and the content area, #aside, #content and #sidebar, are controlled by their .span class which is set to be a percentage of the row-fluid. The <footer> is again as wide as the container.

For fluid layouts, the container is assigned the class="container-fluid" and does not get a specific width. It takes up the entire screen, save for a 20px padding. The <header>, <div class="row-fluid"> and <footer> are as wide as the containing div. The #aside, #content and #sidebar elements are a percentage of the row-fluid, so they get wider or narrower as the browser window gets wider or narrower.

The template.css has multiple styles for the .span classes. Right off the bat, you have this call:

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

This makes anything that has the .span designation, .span1, .span 2, etc. float to the left.

The template.css file is extremely long, so we won't go into every width for each .span class.

In summary, the template.css breaks down each .span classes to a percentage.

.row-fluid .span3 {
    width: 23.404255317%;
}

.row-fluid .span6 {
    width: 48.936170208%;
}

.row-fluid .span9 {
    width: 74.468085099%;
}

.row-fluid .span12 {
width: 99.99999999%;
}

Custom Styling with Protostar

If you want to add the .span classes to elements such as modules, you can add that class in the Module Class Suffix text box in Module Manager. It is very important that you place a space before the word span. You would enter something like " span2" (don't put in the quotation marks).

Remember, the span classes define the width of the element as compared to the containing element. If you were to assign a class of span4 to a module that is put into position-3, it will take up roughly 3/12th or 25% of the width of the <main id="content"> area. If the content area has expanded to the width if the entire page, your module will be 25% of the entire page. If the content area is narrowed down to make room for the two side columns, your new module will also be narrowed down proportionately.

You could use this styling if say you wanted 4 columns in the <footer>, each module could be given a class of .span3. They would automatically float left and have a width of approximately 1/4 of the containing <footer> element.

If you wanted two side by side modules in the #aside column, you would be better assigning your own class name, then styling that class for something like 48%, as .span3 can not be easily divisible by 2.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.