View source

{{#customtitle:JA T3 Framework Overview|JA T3 Framework Overview}}

{| align="right"
  | __TOC__
|}
[[image:T3-logo.gif]]<br /><br />

<span style="font-size:16px;color:#666;font-weight:bold;">Welcome to the JA Purity II template and the T3 Framework documentation!</span><br/ >


=Overview=
<div style="background: #f6f6f6; border:1px solid #ccc; float:right; padding: 0px 5px;">
[[#firstHeading|Back to top]]
</div>
The new JA Purity II template for Joomla! is the first template to introduce the T3 Framework, it is free and will help developers around the world to build beautiful websites, SEO optimised, mobile ready, with clean up to date and stable code.<br/ ><br/ >

Click here to [http://www.joomlart.com/demo/#templates.joomlart.com/ja_purity_ii see demo].<br />

We believe you will enjoy more developing with Joomla! 1.6 and the new T3 Framework.<br/ ><br/ >

=Important Note=
We have upgraded the JA T3 Framework to version 2.0. Please visit the designated wiki sections below:
* [[JA_T3_Framework_2/Overview | Overview]] 
* [[JA_T3_Framework_2/Guides | Developer Guides]] 
* [[JA_T3_Framework_2/FAQs | Customization FAQs]] 
* [[JA_T3_Framework_2/Navigation | Navigation]] 
* [[JA_T3_Framework_2/Copyright | Copyright]]
<br />

=What exactly is T3=
<div style="background: #f6f6f6; border:1px solid #ccc; float:right; padding: 0px 5px;">
[[#firstHeading|Back to top]]
</div>
T3 framework is the third generation template framework developed by [http://www.joomlart.com JoomlArt] for Joomla! 1.5 and above and brings a new file/folder structure, new features and lots of improvements.<br />
So what exactly can this new T3 framework do? Essentially it does a big thing with small and innovative scripting.<br /><br />

The major new features coming with the T3 Framework:
* Modular code makes the template light and fast but also powerful.
* An advanced navigation system upgraded by [[JA_Template_Framework/Navigation|introducing the Megamenu]], that improved the other menu systems by giving them additional class and menu item description or slogan line, but also upgraded the template functions by adding menu system [[JA_Template_Framework/FAQs#Menu_system_override|override options]].
* [[JA_Template_Framework/Guides#The_JA_Purity_II_layouts|Multiple layout system]] - layouts are built with blocks having distinctive styling and module positions. 
* Mobile Ready - made possible with device detection capabilities implemented into the framework to make your website compatible for mobile devices such as Blackberry, Android, Palm, Windows Mobile and also iPhone devices.
* Native RTL support powered by ingenious code to switch text-direction and template styling.

<div style="display:none;">
Let's have a look at these examples below, we will explain why classic templates are not suitable anymore:<br/ ><br/ >


''Example 1''<br/ >
For instance you want your visitors to be able to turn off the adds in your website. A lot of your users complain that your adds are not reader friendly (sure you know those aggressive and colored emotions), but you don't want to turn off those adds right? So what can you do?<br/ ><br/ >

* Pay coders to develop script that can hide divs or modules on users click?
* Create a new dedicated template? But why managing two templates?
* Tell your visitors that is impossible? Of course not!
<br/ >
The best solution is this: ask your users where do they want you to put the adds, because now you have the power to create a new layout called move-adds-to-bottom, or remove-adds-from-header. Basically you create a layout without the module positions that you usually use for displaying those adds, or maybe move those module positions to another template block. The layout switch and the rest is done by the scripts powering the framework. Power of simplicity, remember?<br/ ><br/ >

''Example 2''<br/ >
You want to use the same template for your main website and for your blog, but you don't want them to look the same. You need another logo image for your blog, a different color theme, different module positioning and some special scripts that you don't want to use on main website.<br/ ><br/ >

Again a similar simple solution: create 2 beautiful layouts that suit your need, with distinctive format, each having own specific blocks, with different scripts, different style classes and image sets. Further more, you will create [[JA_Template_Framework/FAQs#Page_overrides| page layout overrides]] and the framework will automatically change the colors when browsing specific pages.<br/ ><br/ >

''Example 3''<br/ >
You want to target Internet Mobile users and you want to have a template... is that possible with the T3 framework?<br/ ><br/ >

YES, JA Purity II has a default layout for handheld devices and one for iphone. You can just use and customize these layouts, or create new layouts using these as examples.<br/ ><br/ >
</div>

=T3 vs standard framework=
<div style="background: #f6f6f6; border:1px solid #ccc; float:right; padding: 0px 5px;">
[[#firstHeading|Back to top]]
</div>
The new T3 framework is different than the classic framework. Any usual template has the capability to manage module positions and styling classes, manage overides, detect user's browser client, interact with the user in a certain manner, and others can give a user the freedom to chose from multiple colors or font sizes, but they all have the same structure.<br/ ><br/ >


{|  style="width: 100%;" border="0"<tbody> 
|  style="text-align: center; font-size: 16px;" colspan="2" | <strong>Features</strong>
!  style="text-align: center; font-size: 16px;" width="30%" | Classic Joomla&#33; Templates
!  style="text-align: center; font-size: 16px;" width="30%" | T3 Framework Templates
|-  style="text-align: left;"
|  style="text-transform:uppercase; padding:15px; border-style: solid; border-width: 1px; color: #ffffff; background-color: #009ab1; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; text-align: left;" rowspan="5" | <strong>Basic</strong>
|-  style="text-align: left;"
|  style="text-align: left;" | Template overrides
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Multiple module positions
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Multiple color themes
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Fix for .png graphics
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="padding:15px; text-transform:uppercase; border-style: solid; border-width: 1px; color: #ffffff; background-color: #0070b1; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; text-align: left;" rowspan="5" | <strong>Advanced</strong>
|  style="text-align: left;" | Mobile ready
|  style="text-align: center;" | [[image:no.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Right to left support
|  style="text-align: center;" | [[image:no.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Load modules as menu items
|  style="text-align: center;" | [[image:no.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Multiple layout system
|  style="text-align: center;" | [[image:no.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Page layout overrides
|  style="text-align: center;" | [[image:no.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="padding:15px; text-transform:uppercase; border-style: solid; border-width: 1px; color: #ffffff; background-color: #024c77; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; text-align: left;" rowspan="5" | <strong>Frontend user tools</strong>
|  style="text-align: left;" | Color theme control&#42;
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Template width control&#42;
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Font size control&#42;
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Layout control
|  style="text-align: center;" | [[image:no.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Navigation control&#42;
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="padding:15px; text-transform:uppercase; border-style: solid; border-width: 1px; color: #ffffff; background-color: #00304b; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; text-align: left;" rowspan="5" | <strong>Menu systems</strong>
|  style="text-align: left;" | Megamenu
|  style="text-align: center;" | [[image:no.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Moo menu&#42;<br />
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Split menu&#42;<br />
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | Dropline menu&#42;<br />
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|-  style="text-align: left;"
|  style="text-align: left;" | CSS menu&#42;<br />
|  style="text-align: center;" | [[image:yes.png]]
|  style="text-align: center;" | [[image:yes.png]]
|}
&#42; ''The original JA Purity is one of the classical templates that support some of the features built in the T3 Framework.''<br /><br />
The new T3 framework will add more freedom to the end user by letting him chose the navigation type and layout that he likes the most. You will be able to create a single layout or multiple layouts exactly how your users want. The T3 framework will successfully upgrade the way you develop. You can now create a full control panel for your users to customize the web interface like never before.<br/ ><br/ >

=The advantages of T3=
<div style="background: #f6f6f6; border:1px solid #ccc; float:right; padding: 0px 5px;">
[[#firstHeading|Back to top]]
</div>
* native RTL support - became a mandatory requirement in the globalization context;
* modular structure - working with custom layouts and custom blocks push the content management even further;
* modern navigation systems - now you have five menu systems for you main navigation, meet the megamenu, dropline menu, split menu, moo menu and css menu;
* minimalistic scripting - simple, optimized and organized code make the template lighter but more powerful;
* maximum flexibility - the development never got that far before;
* easy DIY - our documentation and support team are here for you almost 24/7 to assist YOU;
* developer friendly - the structure makes the work easier and more organized;
* readers friendly - allow your users to close unwanted content blocks;
* human friendly - fast page load and more control power to the end-user;
* SEO friendly - because we care about your visibility in search engines;
* mobile ready - meet the impossible made possible, it's quick and free!

=Download=
<div style="background: #f6f6f6; border:1px solid #ccc; float:right; padding: 0px 5px;">
[[#firstHeading|Back to top]]
</div>
JA Purity II Template is free and you can download it [http://www.joomlart.com/forums/downloads.php?do=cat&id=145 here]!

=Support=
<div style="background: #f6f6f6; border:1px solid #ccc; float:right; padding: 0px 5px;">
[[#firstHeading|Back to top]]
</div>
Whenever you need a hand developing with T3 Framework, feel free to ask for support in our [http://www.joomlart.com/forums/forumdisplay.php?f=170 designated forum section].<br />

If you need professional help, submit a ticket in our online [http://support.joomlart.com support portal] and our support team will reply in 12 hours!<br />

No account yet? [https://www.joomlart.com/member/signup.php Subscribe here]!

=Changelog and Roadmap=
<div style="background: #f6f6f6; border:1px solid #ccc; float:right; padding: 0px 5px;">
[[#firstHeading|Back to top]]
</div>
Visit our Project Management portal for [http://pm.joomlart.com/browse/JATCPURITYII?report=com.atlassian.jira.plugin.system.project:changelog-panel Changelog] & [http://pm.joomlart.com/browse/JATCPURITYII?report=com.atlassian.jira.plugin.system.project:roadmap-panel Roadmap]<br/>



<div style="-moz-border-radius:10px; border:1px solid #ccc; background:#f6f6f6;padding:1em; font-size:110%; font-weight:bold; text-align:left; width:580px;">
<div style="float:left;margin:5px 10px 0 0;">[[image:Joomla-128.png]]</div>
<span style="color:green;font-style:italic;">JA T3 Framework for Joomla! Resources (2009 version)</span><br />
[[JA_Template_Framework/Overview | Overview]] | [[JA_Template_Framework/Guides | Developer Guides]] | [[JA_Template_Framework/Navigation | Navigation]] | [[JA_Template_Framework/FAQs | Customization FAQs]] | [[JA_Template_Framework/Copyright | Copyright]]<br />
</div><br />

<div style="-moz-border-radius:10px; border:1px solid #ccc; background:#f6f6f6;padding:1em; font-size:110%; font-weight:bold; text-align:left; width:580px;">
<div style="float:left;margin:5px 10px 0 0;">[[image:Joomla-128.png]]</div>
<span style="color:green;font-style:italic;">JA T3 Framework 2.0 for Joomla! Resources</span><br />
[[JA_T3_Framework_2/Overview | Overview]] | [[JA_T3_Framework_2/Guides | Developer Guides]] | [[JA_T3_Framework_2/FAQs | Customization FAQs]] | [[JA_T3_Framework_2/Navigation | Navigation]] | [[JA_T3_Framework_2/Copyright | Copyright]]<br />
</div><br />

<div style="-moz-border-radius:10px; border:1px solid #ccc; background:#f6f6f6;padding:1em; font-size:110%; font-weight:bold; text-align:left; width:580px;">
<div style="float:left;margin:5px 10px 0 0;">[[image:Drupal-128.png]]</div>
<span style="color:blue;font-style:italic;">JD T3 Framework 2.0 for Drupal Resources</span><br />
[[JD_T3_Framework/Overview | Overview]] | [[JD_T3_Framework/Guides | Developer Guides]] | [[JD_T3_Framework/FAQs | Customization FAQs]] | [[JD_T3_Framework/Navigation | Navigation]] | [[JD_T3_Framework/Copyright | Copyright]]<br />