Joomla 3 with the Protostar Template for Responsive Web Design

Illustration showing multiple devices

Joomla 3+ is a free Content Management System, CMS.

Joomla 3+ comes with two front end templates and 2 administrative templates. The front end templates determine what the visitor sees. The administrative template, or backend, is where the administrators create content, change settings, manage users, upload extensions for additional functionality, etc.

The Protostar template is one of the two front end templates that come included with a Joomla 3+ installation. This web site is a guide for understanding the Protostar Template and making changes to it to fit your needs.

Joomla is a free CMS that can be downloaded from joomla.org. You can choose to test drive a Joomla site by going to demo.joomla.org or joomla.com. Otherwise, a Joomla website requires that you have a hosting server for installation. The hosting server must meet the minimum requirements for a Joomla installation as far as supported databases, PHP version and supported web servers. The hosting account must have access to a database for storing the information about the site as well as access to the file system for uploading and unzipping the Joomla installation files. 

Joomla can also be installed on a local computer as long as it has WAMP, LAMP or XXAMP installed for accessing the database using Apache, PHP and MySQL. A local installation is often used for learning the Joomla system and for developing new sites before they go live on the web.

To find out more about installing and using Joomla CMS, we invite you to visit our associated site: joom3.zemplate.com

What is a Content Management System?

cms graphic

A CMS is an user interface for creating websites. A CMS compiles the web page from content contained in a database or other files according to the instructions dictated by the template and the CMS installation on the server.

The CMS makes it much easier to access the database with a user-friendly interface. You can create content and manipulate the appearance of the site without having to know how to use PHP or MySQL. If you want to change the way the website looks on the front end as far as the layout, colors and fonts, you should know about how to use HTML, XML and CSS. It is also very handy to be familiar with diagnostic tools such as Firebug to see the structure of the web page as it is displayed on the screen.

Joomla is the second most popular CMS on the internet worldwide. WordPress being the most widely used CMS per W3techs.com.

Joomla 3+ is a CMS that uses HTML, XMLPHP and MySQL to create web pages. Per w3techs.com, Joomla is used by almost 3% of the websites worldwide and Joomla is used by almost 8% of all the websites using a CMS.

What is a template?

The front-end template is the framework that compiles and displays the written content, the images, the navigation, the columns, the banner areas, the advertisements, etc. The administrative template provides the user interface for the administrators to create and edit the content, manipulate the navigational menus, upload images, install extensions, etc.

With Joomla, the front-end template contains the initial file, index.php, that uses PHP to upload the content from the database to create every page on the website. Each page is compiled using this one main file. This file in turn uses many other files in the Joomla installation for formating each section of the page. There are other PHP files that manage the display of content, menus, contact pages, links, etc. The template's index.php file also creates the HTML framework for the layout of the web pages.

The styling of the template is done by using CSS stylesheets. Depending on the template, there may on or more stylesheets associated with the template. The stylesheet determines the colors, fonts and layout of the web page.

A Joomla 3+ installation comes with the two front-end templates, Protostar and Beez3, and two administrative templates, isis and Hathor.

There are many other 3rd party templates available for Joomla. Some 3rd party templates are free, others are available for a cost. The use of a  3rd party template can save you many hours of styling and file manipulation to get the look and layout that you want from your site. It does make you dependent on the provider of the template when you need support or need to upgrade your site.

What is the Protostar Template?

template-illustration

The Protostar template is the default template that you will see when you first install Joomla 3+. The copyright for the Protostar template is owned by Open Source Matters, part of the Joomla! community.

Protostar is a fairly simple template, with a minimum of styling, that can act as a blank canvas for your site. Some changes to the layout and appearance are very simple, where other changes require a good knowledge of HTML and CSS.

You can find other 3rd party Joomla templates at multiple locations throughout the web. There are free templates and ones you must pay for. If you have specific ideas about how you want your website to look, we suggest your look through these available templates. These templates will provide you with an interface that is ready to go with relatively little styling or modification.

If you want to completely do your own thing with your Joomla website, you can modify the Protostar template. You should have a thorough knowledge of HTML and CSS to modify the Protostar template. An understanding of PHP and JavaScript is a great help, too.

The Protostar template has a few settings and options that can be access through the Template Manager in the administrative menu for Joomla. These settings allow you to upload a logo, change the site title and description, set the font for the site title and headings and change the color for the links. You can also choose if you want a Static or Fluid layout for the site. Other than these few settings, any changes to the Protostar template must be done through accessing and editing the template files.

Protostar uses Bootstrap 2 for the framework of the site. These settings determine the width of the columns and allow for a responsive web site as far as the multitude of screen sizes available.

Protostar has a single CSS stylesheet, template.css. All of the default styling is contained in this one very lengthy file, including the @media styling for smaller screen sizes. To change these styles, we suggest creating a custom CSS stylesheet that will contain the overriding styles that you want for your site. This custom stylesheet must be loaded into the HTML document after the template.css in order for the styles to override the original styles. Using a separate stylesheet allows you to easily and access the new styles. It will also not be overwritten when upgrading the Joomla installation.

What is Bootstrap 2?

Bootstrap 2 is front-end web development tools made of CSS mixed with some JavaScript to help make websites more responsive in terms of various screen sizes. Also put to use are @media queries and utility classes. It was created by two web developers at Twitter to facilitate web design so that there is less styling required for responsive web design.

Bootstrap 2 uses a 12 across grid system that can be static or fluid. This means that the site will either snap to certain container widths or reduce in size with a fluid motion where all of the divs are a percentage of the container width and reduce in width accordingly.

Protostar is designed to use Bootstrap 2, not Bootstrap 3, which is the latest version.

It takes a bit to get your head around, but if used properly, can ease the need for extensive styling fixes for smaller devices.

Note: The styling for the pages can certainly be modified, but the web developer must work within the basic parameters of the template, media queries and utility classes in order for the site to function properly.

Click here for a more complete explanation of Bootstrap.

How does Protostar utilize Bootstrap 2?

Protostar uses the Bootstrap 2 grid system and allows you to select if you want a static or fluid layout. Both are responsive in that they change the size and location of the grid system depending on the screen size of the device.  

Responsive: Static Layout

The static layout uses 12 columns and styles the container to have a max-width of 960px. As you narrow the screen, the next static width for the container is 724px. Below that width, the container reduces width as the screen reduces width. The divs will stack vertically. A horizontal menu will become vertically stacked as well.

Read more about Protostar's Static Layout...

Responsive: Fluid Layout

The fluid system uses percentages instead of pixels for column widths. The .container-fluid class reduces proportionately in width as the screed reduces in width. The inner divisions within the container also reduce in width. For narrow devices the division stack on top of each other. This is all done in a fluid manner, constantly changing. This may be suitable for some sites, but the developer needs to keep in mind how images are going to work in this environment, as well as text wrapping.

Read more about Protostar's Fluid Layout...

Other Things to Note

With the default Bootstrap media queries, the responsiveness of a Bootstrap site can be seen by reducing the width of your browser window as well as on tablets and phones. This is because the media queries use min-width and max-width instead of min-device-width, etc.

The Bootstrap styling is intended to reduce the amount of CSS required to have a properly responsive website.  All of the styling for Protostar default template is contained in one file called template.css. You can create your own overriding styles for any of the default styles for Protostar, but you should be careful that you do not alter the responsive layout.

BJ