The Joomla! Community Magazine™

Using a Joomla Template Framework to Design your Site

Written by | Monday, 01 October 2012 00:00 | Published in 2012 October
Can't find a Joomla template that fits your needs? Want to take a crack at building your own template, but don't know where to start? There are some great tutorials out there, but if code turns you off then don't run for the hills! A template framework is just what you need.

If you're not familiar with the term, a template framework is basically an empty canvas, or base for designing your own theme. Frameworks install just like normal Joomla templates, and contain all of the features you need: dynamic module positions, menu styles, template parameters..etc. You just need to add the visual design, which, in some frameworks can be done from inside the template control panel itself. With just a basic knowledge of CSS, you can easily style these template frameworks to fit your needs.

There are many Joomla frameworks out there, each with unique features. In this article I'll be going over three of the most popular Joomla template frameworks: Gantry, Warp and T3. These frameworks are all free to download and customize, and they're also free to distribute under a GPL license.

Gantry Framework

The Gantry Framework is developed by RocketTheme, one of the original Joomla template clubs. Gantry is what powers their club themes nowadays. The framework has been around for a few years, and recently got a major overhaul. The all new Gantry 4.0 offers a complete responsive experience and integration with the popular Twitter Bootstrap framework. The template manager has extensive configuration options, laid out in a clean user friendly control panel. If you've ever used a RocketTheme template, then you should be familiar with this interface.

Gantry Features

  • 78 Module Positions, six columns
  • 10 module position layouts
  • 3 mainbody sidebars
  • Template file Compression
  • Style presets and overrides with page assignments
  • Mobile:  Responsive, custom module positions
  • Template width: Responsive, Fixed 960, fixed 1200
  • Built in LESS CSS Compiler
  • Uses Twitter Bootstrap
  • Entire Google font library

If you're building a large site that needs several layout variations, then definitely check out Gantry. The feature-packed control panel combined with the large amount of module positions make any layout you can dream of a possibility. And no problem if you don't want to touch any code. Gantry comes with a few pre-built styles out of the box that look great on their own. Theme styles can be saved as presets and assigned to different menu items. You can further customize the look in the styles editor, or create your own theme from scratch with a basic knowledge of html and css. RockeTheme also offers a variety of free and commercial extensions that integrate nicely with Gantry.

More details and to download Gantry

Warp Framework

The Warp Framework is made by the folks at YooTheme. It is also the underlying framework that powers their club templates. Unlike Gantry, the Warp Framework does not use Twitter Bootstrap. With all this talk of Boostrap in the Joomlaverse lately, you may see that as a negative. But, I see it as a positive. The Warp Framework has years of development behind it, and is a powerful framework in it's own right, comparable to Bootstrap. Warp's codebase is extremely light, and the entire presentation layer is self contained in a single folder. This means your themes can easily be transferred to other Joomla sites, and even to WordPress!

Warp Master Theme Features

  • 40 Module positions, six columns
  • 3 module position layouts: Double, Equal, Stack
  • 2 mainbody sidebars
  • Mobile:  Responsive
  • Template width: Responsive or fixed to any size you define
  • Create custom child theme styles
  • Theme profiles with page assignments
  • Template file compression
  • Custom Ajax search 
  • Built in social sharing options
  • Modules in dropdown menu

The warp framework is a good blank canvas for your own design. It does not come with extensive pre-built style variations like gantry does. But, it does come with some preset color combos for text and headings, and also a nice set of Google fonts to choose from.

Warp works best when you create your own "child" theme, which is as simple as creating a new folder and css file. Your new theme will automatically appear as as a style option in the template back end. You can create as many theme styles as you want. And following Joomla's MVC architecture, you can extend each of your theme styles with custom system overrides for any content or module view. Warp also allows you to create profiles from your theme settings, which can be assigned to menu items. Use this feature to create varying layouts and styles for any of your site's pages.

In addition to the built in features, Warp integrates perfectly with YooTheme's free components, Widgetkit Lite and Zoo. Widgetkit Lite is a set of modules that includes responsive content rotators, lightboxes, and a twitter feed module. Zoo is a dynamic content builder that works great for blogs and directories. Of course, you can use any third party extensions you choose. I just find it convenient to use well-developed components that were made by the same folks as the template.

More details and to download Warp Master Theme

T3 Framework

The T3 Framework is available for free from the developer of the JoomlArt template club. Install the T3 Blank Edition, or use the free Purity template as a base. T3 is not a responsive framework by default, but has a built-in mobile theme that can be customized depending on the device. 

JAT3 Blank Edition Features:

  • 2 Mainbody sidebars
  • Mobile: Custom themes
  • 5 different main menu systems
  • Google font api
  • Create different color themes and layouts
  • Template file compression
  • Front end template control panel menu

T3 has several configuration options in the template control panel. It's probably the least intuitive framework of the three mentioned in this article, but depending on your skill level, T3 is pretty simple to customize using basic html and css. One of the unique features is the customizable block system. Using XML, you can re position the blocks (sections that hold the module positions), and save them as layouts. Your custom layouts can be assigned to theme profiles or targeted to mobile devices. The XML layouts are editable from the template control panel, where you can also upload new ones.

For a responsive version of T3, checkout JoomlArt's free template called JA Elastica, their first responsive theme built on the T3 Framework.

More details and to download T3 here

More Joomla template frameworks worth checking out

Gavern Framework by Gavick Pro (Paid)
Construct Framework (Free)
Wright Framework by JoomlaShack (Free)
JA Wall by JoomlArt (Paid)
Zengrid by Joomla Bamboo (Paid)

In Conclusion 

While many of these frameworks feature extensive control panels and dozens of module positions, don't let those reasons alone be the deciding factor for your site. You will probably never need to use all of the module positions available, and you'll spend little time in the control panel after the site is set up. I recommend installing one of the free frameworks & spend a few minutes exploring the features. Then install another and compare the two. Most of these frameworks have well-written documentation to get you going.

And lastly, If you do want to try your hands at building a template from scratch with minimal coding, then check out Hagen Graf's article from August 2012: Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch.

If you've tried a template framework, then what's you're favorite one? Share your thoughts in the comments below. Happy Designing!

Read 190119 times
Tagged under Designers, English
Scott Greenwald

Scott Greenwald

Scott Greenwald runs the popular resource site JoomlaDirect.com. He's a seasoned front-end developer with a background in graphic design. Scott works as a fulltime freelancer from his home office in Tokyo Japan, where he specializes in custom Joomla development and template design for clients.