The Joomla! Community Magazine™

Using a Joomla Template Framework to Design your Site

Written by | Sunday, 30 September 2012 17: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 hosting 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 206695 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.

avatar
What about the rest of framweorks, Gantry, Warp, T3 only? What a
kind of self-promotion?
Ja wall is a framewok or is it just advertising?
VOTES:-1
avatar
Mark, I am not affiliated with any of the template clubs mentioned. I had also written a nice paragraph about JA Wall, which, unfortunately, was edited out. It's definitely a unique framework.
VOTES:-5
avatar
JA WALL is paid only, and is more of a template. It is NOT as flexible as the rest listed here. It's responsive by "The Wall" which limits it to only pinterest style portfolios sites.
VOTES:-2
avatar
Scott,

I enjoyed your article but I must say I was surprised you did not highlight the Wright framework by JoomlaShack. I have been a member of JS for some time and their framework is the best hands down. Although I am not familiar with Yoo Theme's Warp framework, I have used Gantry & T3 and the Wright framework is a straight forward and solid framework to build a template on.

Instead of your comments about not really needing all those settings, why didn't you review or even provide more info about Wright?

Thanks,

Kim Huff
Indianapolis, IN
VOTES:1
avatar
Hi Kim. I personally don't have experience with the Wright framework, although I've heard it's pretty good too, which is why I mentioned it at the end. I prefer to use Warp for most of my projects these days.
VOTES:-2
avatar
How can you say it's the best "hands down" if you've not tried others? I prefer gantry or warp.
VOTES:-2
avatar
I haven't heard of this framework, but looks promising. I like Gantry , but it does have features I wouldn't use on my own websites (colorchooser,presets,&more). If I was to create a template to sell, I'd use Gantry for its easy back-end adjustments. Gantry is always being updated with bug fixes monthly, and in some cases new features. Does Wright get updated often?
VOTES:1
avatar
Great! Scott.
VOTES:0
VOTES:-1
avatar
I used some of them, and some others which are not on this list.

One thing that i look is the structure of the index.php file.

Some of them, like warp have a lot of includes in index.php. That makes them less understandable by the newbies, and make them less easy to modify.

For me, there is no best , because they all have some specificities (by example, the T3 cpanel), and it depends the need of the functionnality.

And i am creating a framework based on the beez templates (beez 2, beez 5 and now beez 3) because there is a lack of functionnality, but they are very easy to add in these templates. And theses templates are the most used by the newbies and are the more esay to fit to your needs. It s not released yet, because some more works need to be done.
VOTES:2
avatar
What i find most remarkable about all the frameworks i have played and worked with is the sometimes silly amount of options they offer. 500 fonts seems to be normal, as are 50-100 module positions which all can be set per pixel, profiles, styles, extra js and on and on and on. But seriously, no one needs that, it's more a rat race between template providers to show off what they are able to do. This might be good fun for tech savvy admins or self proclaimed developers:), but for normal users it is only adding to the confusion that they already feel overwhelmed with when seeing the joomla backend.

So based on less is more my favorite 3 frameworks are warp from yootheme, helix from joomshaper and wright from joomlashack. Yootheme unfortunately seems to forget that warp is also a joomla framework, so loads of standard classes you have to add yourself (or add yet another extension), whereas helix is great but unfortunately relies heavily on mootools.

So currently i am making my first joomla 3.0 site with wright and what a joy it is. Ok, in it's simplicity you might miss certain functions, but combined with bootstrap it covers most situations perfectly.
VOTES:3
avatar
Hello Scott,
You missed another framework by ThemeXpert called 'Expose'. It feature rich then T3 or Warp and lightweight. Moreover you can contribute to its code because it open and hosted on Github.

I hope you will take look at it :)

Thanks
VOTES:1
avatar
I have been using JA's T3 Framework for years and once you get to know it, I really do believe that it is the fastest one to customize complex sites and site layouts with. I have built a few sites with Gantry and Warp, but I found Gantry a bit bloated and Warp was hard to customize some very simple things without writing quite a bit of code. I do like that Warp doesn't require a plugin and is extremely lightweight though.
VOTES:1
avatar
Useful article!

There are many joomla frameworks which you can use for your project.

I recommends you to use JV Framework (www.jvframework.com/) or ZO2 Framework (zo2framework.org) Both of them are free and responsive frame work based on BootStrap framework.

Cheers!
Linh
VOTES:4
avatar
A good article. I have experience with the Warp framework and it really works well. Now the T3 framework is also responsive.
VOTES:0
avatar
Has anyone tried (being the operative word) to optimize a RocketTheme template? The Gantry framework -as lovely as it is - is a massive initial page load hit.

Most Joomla sites on frameworks have 1.2+ Mb initial page load.

Every available extension on JED for site optimization is pretty much useless against a bloated framework ike Gantry and recommendations from YSLow & Google PageSpeed just rub salt in to the wound!

It is really about time that Joomla core development team and commercial template developers start thinking about site optimization concerns.

It would be useful if you could provide some metrics for each template framework - the number of JS & CSS files, and their size.
VOTES:0
avatar
Frameworks suck and add nothing to a website as far as I'm concerned. They offer no benefit to building a template the old fashioned way.

If you aren't comfortable with code you have no business building a template to begin with. It's just the wrong way to do things. Your template should start from a Photoshop mockup and be built from the ground up.
VOTES:-2
avatar
I agree...why every template site feels they need "every" template to be made with a framework is beyond me. I design my templates the old fashion way because it keeps them streamlined and simple for the typical end-user...less chances of something going wrong. As for Joomla and the Bootstrap framework, big mistake in my opinion and I can easily say I won't be using Joomla 3.0 until they change their direction they are going; this could be the end of my use of Joomla after 5+ years.
VOTES:0
avatar
Photoshop is not for Mockup... Fireworks is.
VOTES:-1
avatar
I have extended the Warp framework to support server-side LESS compilation, with many other features that Gantry has. Please visit my github repo here for more information.

And having worked with both templating engines, they both have their strengths and weaknesses. The main difference is that Warp is template-based, whereas Gantry is installed as a component, so it is separate from the template installation. If you want to customize the way the framework behaves, you might want to stay away from Gantry. For example, for whatever reason, you might decide to use some of CodeIgniter's functions, or to integrate them into Warp. But all this depends on what you're aiming to do.

Cheers.
VOTES:-1
avatar
Great. We are using Gantry for some times, and its great framework.
VOTES:-1
avatar
What a kind of self-promotion? Man you have learn/searching in this world how many Framework. Just search on Google then write new post

LOL

WARP is not good, personally i don't like it. I am using T3 from 2009. GAVERN features are nice.

There is another great Joomla Framework:

* Helix Framework by JoomShaper.com

* Expose Framework by ThemExpert.com

* YJSG Framework by YouJoomla.com

I think you need to write more more things about Joomla Framework in this post, but you don't.

Keep writing and Best wishes scott.
VOTES:4
avatar
I guess it's more of a css template than a true Joomla! template, but I've been using "The Square Grid" a lot. The provided design layout templates in Photoshop, Illustrator and InDesign, make it really easy to give designers a hand and build the site exactly as they've designed it.

thesquaregrid.com/
VOTES:-1
avatar
Nice resource Andrew!
VOTES:-2
avatar
We have also developed a Joomla Framework based on Foundation from Zurb! But sorry, it's not for public!

But you can have a quick watch here: Foundation Framework for Joomla
VOTES:1
avatar
Nice article!

Regarding "whats your favorite one"...
I would like to see a complete list of template frameworks and a poll ;-)


Personally I used (random order):

- Joomlart T3 v1 and v2
- Yootheme WARP
- Gavick GAVERN
- JoomlaBamboo ZenGrid
VOTES:1
avatar
Thank you for this post. I learned a lot from this post to build my "Framework" Joomla Template. It's call Avatar Dream Framework.
I try to keep it simple to get quickly process and do no try to wrap over functions.

My first responsive template for Joomla 2.5.8 base on it : Avatar Simple

www.joomavatar.com/avatar/joomla/templat...joomla-template.html
VOTES:-1
avatar
You should include a table that shows major features per framework/vendor, for instance, showing which support particular frameworks or impact core Joomla files.
VOTES:0
avatar
hallo..how get to the pricing templates 2.5? i need to survey the detail price.. please..
VOTES:0
avatar
Hey Scott,

I'm someone who wants to design my templates from scratch. How can i use these frameworks to speed up the process. Do i need to adapt my designs to the framework,or is there a way to convert my designs to work with the framework?
VOTES:0
avatar
I would suggest installing the template framework of your choice and playing around with the css. I find it better to create my designs first (in photoshop) with the framework in mind. This allows me to design the layout based on the capabilities of the framework's layout (module positions, etc..).
VOTES:1
avatar
Great Tutorial Scott Greenwald. I will use Gantry for future template development. Thanks again for your great job with great information.
VOTES:2
avatar
Having at this point essentially tried all of them except Gavern I can say they are all essentially worthless if your looking for any sort of flexibility. Your going to spend more time trying to get them to do what you want than just going from scratch or using an existing light weight grid framework.

Gantry is a disaster. Perhaps if they released the entire tool set they use make their themes, who knows? But its a disaster. I've found 6 issues that I questioned them on in their forums. They deleted the threads. So, they just dont care.

Yoo Warp is better, far better. BUT it has issues as well. Stupid small details missing, amazing. Things like in widget-kit having to enter URL's .vs. a button to get to the media manager. LOTS of annoyances.

T3 - Limited, not responsive. Also has issues but is still better than Gantry.

I can go on and on...

THe problem is these companies have been living in the Joomla world. While Joomla wishes to pretend its hugely significant the reality is WordPress is a better CMS by far and they are now attempting to find a way to transition. Its no secret or fable. Joomla in CMS sites is loosing ground. As many reviews have said, it fits in no-place. Wordpress is easy, powerful, fast and has more running sites than All other PHP CMS sites combined. Drupal is starting to get thing user friendly. Its the most powerful of the big three. Joomla sits noplace. In the middle, thats no place as again many a review has said.

What the lions share of Joomla template/extension makers dont realize is Wordpress is a MUCH MUCH more competitive market for templates or extensions. Garbage gets routed out pretty quick.

You might ask yourself WHY all these places decided to GPL these frameworks? I will give you the answer. THey are hoping others change/build on it so they may "survive".


While Joomla core folks like pat themselves on their heads and say how wonderful they are doing ask any decent sized hosting firm. I deal with 14 different large sized hosts. Few months back when I started having my clients ask for Wordpress other than Joomla I talked to sales/support at each. Every single one same story. Essentially for every 1 Joomla site hosted there are 40-50 WP sites and its loosing ground.

Why?

Because no matter how nice the extensions are that companies create (many of which dont play well together if at all) the usability of the core CMS is horrible. The term content management comes from publishing, Joomla has zero workflow. The core developers dont care about that, what they care about is developers keep making things as it keeps them in the money. Without the third party devs they are poor and the bigger ones are now starting to try transition to Wordpress. Cept', they dont realize its a much bigger market which mean many more developers. So, they take a lesson from open source, lets have other developers try help us survive.

What all need realize is these cottage operations are 95% piece meal. They dont document code for example, get you failing your first programming class in any school ESPECIALLY if you place redistribute it.

Lastly... If you plan on staking your future in revenue in any of these, Joomla, Drupal, Wordpress even... DONT.

The "Personal content" and "commercial content" based websites are being VERY watched by several big players, Google, Adobe and Amazon most notably.

They see millions of webs out there built with these piecemeal systems and its a market they are "cloud targeting" and not in a "lets all be open source" fashion. Its a "next big cashcow" and these little players, Drupal. Jooma, WP... all dead, they just dont realize it.

A few have got smart, ModX for example going cloud ready, getting "real names" on board (like Dell)

From what I've heard Amazon is going to be the first to deploy. Complete drag n drop system, enterprise ready, workflow! (imagine that!). To give you an idea, look at Liferay Portal, then imagine it at the "next level". Thats whats coming.
VOTES:0
avatar
WHat About the Expose Framework? Compare with the three you've talked about, How is it?
I'm trying to design a website whit it right now. It works really good and have many option in the panel. I'm missing some stuff though.

Thanks. Realy good post!
VOTES:0
avatar
Thanks for article, really clarified things
VOTES:1
avatar
I think I got more from the comments than the article itself. Not to dismiss the article... Gantry, Warp and T-3 are all good frameworks, but like any, they each have their share of extra baggage. I have used Gantry extensively, and tried out most of the others in your list. Personally, I'll stick with hand coding my own. Frameworks are good for making templates for distribution to the general public, so less code savvy users can make some basic customization or choose from a variety of "options". But if I'm creating a design for a particular client, I'd rather just build from scratch. Anybody who knows basic css can customize a template far beyond anything a framework will allow.
VOTES:0
avatar
Κατασκευή ιστοσελίδων Sunday, 28 April 2013
I think the Gantry Framework has by far more functionality.
VOTES:0
avatar
Xtreme Digital Solutions Friday, 31 May 2013
Nice list here. Thanks for sharing. As far as my taste is concerned, My vote goes to T3 Framework. It is not only easy to use but gives you so many positions that you can easily get your own template ready quickly.
VOTES:2
avatar
Hi,
There is one more joomla template framework: It's JoomWare FrameWork.
Creating Excellent Websites Quickly and Easily with JoomWare FrameWork!
www.joomware-framework.com
VOTES:1
avatar
I am desperate and just building my first Joomla site using Protostar

Any idea how I change the colour not of the margins or the text but the main body its self

In anticipation
thank you
VOTES:1
avatar
You completed some good points there. I did a search on the topic and found most people will have the same opinion with your blog.
VOTES:0
avatar
Good article Scott, congrats :)
So, from my quite extensive experience I would say that Gantry is by far the best Joomla Framework.

Guys, it is more of a developers preference, not what actually the Framework offers. All of them have pros and cons so it is up to you which one you will use.

Gantry is an amazing, modern, perfectly coded, Bootstrap powered, responsive, feature-rich, frequently updated Joomla Framework!

Warp is also nice, it best feature is that it is really lightweight and very fast (yep, faster than my favourite Gantry).

T3 v3 is now responsive and it is also a very nice framework, but Gantry is way better.

So basically that's it - Gantry is the best and will also be. Unfortunately, it is not the fastest :)
VOTES:2
avatar
Great article.

I'm new to Joomla and writing one's own template seems like a reasonable down the road goal.

A framework seems like a great middle of the road next step.

So,
Thanks!
VOTES:0
avatar
I am new to all of this and have to say thank you to Scott and everyone who commented. Very helpful
VOTES:0
avatar
Time saving advice. I don't have a good coding skill and this software saves me improve the web design in a flash.
VOTES:0
avatar
Has anyone else had experience with Zo2 framework, looks very impressive but never used it yet and am interested in using one of their new templates
VOTES:0
avatar
I've some experience with both Warp and Gantry, and in general they seem to be exercises in rewriting core Joomla functionality for no discernible reason, then not documenting any of it very well and ignoring the support forums.

If you want a framework, I'd recommend finding a nice blank template with bootstrap or something built in and using that.
VOTES:1