A few weeks ago we announced our move to using the T3 framework for building our Joomla templates. Since then we have had some great feedback and some great questions from users who are curious to get a little more detail.

Since that time we have also released two new templates, Grid3 and Inspire

While Bootstrap is an extensive and solid html, css and js framework, Bootstrap in the context of a Joomla template can only provide part of the picture. T3 combines bootstrap with additional functionality, which Bootstrap on it’s own can not do.

Bootstrap provides:

• Consistent markup that can be used across all Joomla views.
• A responsive grid
• A collection of great javascript based effects like collapse, tabs, modal windows etc.
• Easy implementation of font icons

In contrast T3 provides:

• A nice graphical interface for controlling template functionality.
• A truly awesome mega menu.
• A built in LESS compiler. I don’t think you can effectively use Bootstrap without using LESS and bootstrap itself does not have the tools to transform LESS code into CSS.
• A built in themer called Theme Magic which uses LESS to generate real time, non destructive previews of template themes.
• CSS compression
• HTML5 Joomla content overrides
• An easy to use templating structure.
• Control over module position names

Joomlabamboo templates provide on top of this:

• Built in google fonts
• Effects like back to top, lazy load and a sticky nav
• Google analytics, custom copyright and custom code options.
• Our lovely designs

Why do you need to use a framework at all?

Not everyone needs to build Joomla templates using a framework. It is certainly possible to build a Joomla template that covers all of the features mentioned above built into the template layer and some developers certainly prefer to work that way.

The purpose of a framework is simply to provide a code base that is non-template specific, that can be used and updated without disturbing the template files. For template clubs this makes a lot of sense. It means that we can have a core set of features that are standard across our themes and that users can update to the latest version of that feature set with no or very little change to their template files.

For one off template builds with a unique set of features it may make sense not to use a framework but if you are deploying a lot of sites or products with a similar feature set then it certainly makes sense to use a framework to standardise and speed up the build process.

Isn’t it problematic using another company’s code base?

The T3 framework is actually an open source Joomla template framework and while it has been developed primarily via Joomlart through the T3v1 and T3v2 iterations, T3v3 is a much more independent project.

The folks from Joomlart are certainly still doing the bulk of the work, as we learn the ropes, but my hope is that we will become more involved in the day to day code contribution.

The framework has also been renamed from JAT3 to simply T3. And the T3 project is now hosted on a separate independant domain. In a lot of respects, this is the same as the way the Gantry framework is developed and deployed by Rocket Theme.

The code for the framework is all openly hosted on Github and is free for anyone to download and use or fork to create their own version. We are working closely with the JA team and contributing discussion and some code to the development of the framework.

As I mentioned in my earlier posts the development and philosophy behind T3v3 very closely matches our own development and user centric philosophy and so it makes sense for us to combine efforts and create a better project than we could if we were both working independently.

Bootstrap framework offers pretty good responsive behavior. So what is so special about T3 here? What is actually added?

The main addition to the existing Bootstrap “responsiveness” is the graphical interface T3 uses to determine the various module / grid widths which allow the user to simply adjust the widths of specific grid blocks across a number of device widths. Bootstrap can do this via mediaqueries but you have to dig into the code to make this happen.

Bootstrap already utilizes LESS. What is T3's contribution here?

While bootstrap uses LESS on it’s download page (see the customisation page) and you can also download the LESS bootstrap files there as well, you still need a compiler to transform the LESS code into CSS.

I use the app called codekit along side T3 while I develop Joomla templates and then use the T3 built in LESS compiler when I need to export the theme for release.

Codekit is great because it allows me to compile the LESS files into CSS in real time without refreshing the browser which is a god send during the development process.

T3 also uses a development mode which loads the LESS files directly in the browser which means that you can edit the LESS files and have those changes show up on the front end - without needing to compile the LESS code.

T3 also has a LESS compiler that compiles the LESS files from within the Joomla admin and generates the files necessary for when you are using the theme with development mode disabled.

I will be posting a follow up blog post for this one in the near future as using LESS has significantly changed the way that I build Joomla templates.

Bootstrap uses HTML5 features also so what is T3’s contribution to this?

The T3 plugin uses a standard set of html overrides which also use HTML5. These can of course be overridden via the template’s html folder but having a core set of overrides in the plugin cuts down on the need to maintain multiple versions of the same code base.

Again, any updates to the html overrides can be done within one update to the plugin rather than needing to provide a separate update for each template.

Bootstrap itself comes with multiple layouts as samples and allows to create a variety of custom layouts. What T3 does better than Bootstrap?

The key here is that this is integrated into Joomla. The user does not have to change any core code if they want to implement one of the various layouts that are available in the template.

T3 provides an option to select a specific layout for a specific template as per the drop down list below.

Bootstrap's typography is nice and T3 just sits on the top of this. What is T3's contribution here?

This is the case with any framework. Zen Grid Framework v2 was an amalgam of a few frameworks. Namely Inuit (which I still really like) Foundation and one or two other css frameworks. The framework simply provides a baseline for typography which the template builds on top of. More often than not, the template just changes the colour, position or type face used.

Got more questions?

If so then I would love to hear them. Please post any more you might have in the comments below or if you prefer send me a contact email, ask a question on the forum or open a ticket.

blog comments powered by Disqus