The Protostar Template for Joomla 3 has a default framework that allows for the module positions and also utilizes Bootstrap's grid system for a responsive design. This revised framework has be updated to include HTML5 divisions such as <header>, <nav>, <main> and <footer>.

If you strip all the php and extract out of the Protostar index.php file you see the framework of the template as shown below. This is for the static layout, with the <div class="container">.  The fluid layout has the class="container-fluid" assigned to it, which allows for the container to be as large as the screen size and reduce proportionately.  When you select one or the other in the Template Manager it uses php to add the "-fluid" to container.

<!DOCTYPE html>
<body class="site">
<div class="body">
    <div class="container">
        <header class="header" role="banner">
            <div class="header-inner"></div>
            <a class="brand">
                <span class="site-title"></span>
        <nav class="navigation" role="navigation"></nav>
        <div class="row-fluid">
            <div id="sidebar" class="span3"></div>
            <div id="content" class="span6"></div>
            <div id="aside" class="span3"></div>
<footer class="footer">
    <div class="container"></div>

The default styling for the Protostar template has a 20px margin on the container, then the header and navigation are not assigned a particular width and take up the entire width of the container less the padding. The logo is located in the header.

The .row-fluid is assigned a width of 100%.  This is a Bootstrap designation where the divs inside of .row-fluid must add up to 12 for the 12 grids in Bootstrap.  The default for Protostar has #sidebar and #aside assigned .span3 and the content is assigned .span6 adding up to 12.

All divs within .row-fluid with a .span3 designation have a width of 23.4043% and .span6 with a width of 48.9362%.  With the static layout the container has set steps for it's width and the columns then take up a certain percentage of that width.  With the fluid layout, the container is as wide as the screen and the percentages of the columns make it so they change width in proportion to the screen width.  Once the screen size gets in into the range of small screens as in phones, the width of all these divs is set to 100% and float: none and the divs stack vertically.

You can test this out by reducing the size of your monitor window.

Has 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