The latest framework release sees many new features added into the system as well as backwards compatibility with older templates build on earlier version of the template.
One major thing was the introduction of Bootstrap 3. The new Bootstrap brought with it a swag of new features and of course many of these are all integrated into T3 bringing it up to date with the current design trends of the web.
- Bootstrap enabled
- Works with Joomla 2.5 and Joomla 3
- HTML5, LESS and CSS3
- Built in LESS compiler
- CSS compression
- JS compression
- Full responsive layouts for wide desktop, 960 width desktop, tablet and small devices
- Built in mega menu builder and off canvas navigation for desktop, tablet or mobile layouts
- Real time customisation and templating with Theme Magic template builder
- Flexible layouts with drag selectable widths and responsive options
- Font Awesome versions 3 and 4
- Flat design with two versions of the base template Blank and Blank_bs3 to use with either Bootstrap 2 or Bootstrap 3 depending on what you're use to.
- and of course its all open source
So lets look at some of these key features of T3 and what makes it just so cool.
What is it? Bootstrap is a site template framework developed by two great developers at Twitter. They pushed their work out into the web design and development community and large parts of the community took it up and ran with it. T3 is no exception with the adoption of the Bootstrap into its framework.
If you've used or modified other Bootstrap based templates in the past then you're in for a treat as all of the CSS classes, Bootstrap scaffolding and many other features are all included in with the latest version of T3.
Works with Joomla 2.5 and Joomla 3.x
As Joomla grows and changes from version to version, you may find yourself in a position where you are upgrading the Joomla CMS and are left with a lot of work in regards to the template of the website.
Every since switching to T3, the migration of a template from one site to another, or from one version of Joomla to another has not been an issue and is one of the great benefits of working with the framework.
The template framework itself is independent of the Joomla CMS making it very flexible and future proofing itself.
The only major dependency is the T3 framework plugin. As long as there is a working framework plugin for the version of Joomla you wish to use, then you will be able to transport your template to that version of Joomla.
Currently the T3 project supports the Joomla 2.5.x and the Joomla 3.x series.
As Joomla develops, so will the T3 framework allowing it to be ported and trasferable to the next iteration of Joomla!.
HTML5, CSS3, LESS
T3 is build with the latest technologies and web standards around.
All of the base code that you get with T3 is all built with HTML5, the latest standards in HTML code.
CSS3 is also implemented and used through out the templates and framework as well as the all important LESS.
CSS3 allows for native CSS based effects and transitions such as rounded corners, drop shadows and opacity effects.
Combining this with LESS allows for a web developer to code in CSS3/LESS which is highly optimised reducing the amount of code required to implement styling changes in a template.
If you have yet to dive into LESS, please check out these external resources that talk more indepth about what LESS is and how to code using LESS.
Built in LESS compiler
Once you start working with LESS you will find that you actually need a compiler to convert the LESS code into CSS so that a browser can read and render it.
Perhaps one day we will see client side LESS and SASS rendering but not at this point in time.
LESS formatted in a way that saves a developer time and allows for clean semantic coding of the CSS, but of course this can't be read by normal browsers and a compiler is needed to convert it into normal and standard CSS.
T3 comes with a LESS compiler built into it making the need for an additional server side compiler unnecessary. This LESS compiler gets triggered on the fly as your web page is being rendered which means you don't need to configure or need to even know what it is doing in the background.
CSS compression & JS compression
With all of the excessive CSS and JS files needed to render a Bootstrap template, it is important to make sure tht the templates are optimised and compressed to give the end user the best experience possible.
Normally an uncompressed template may have multiple CSS and JS files increasing the amount of requests for these files to 15 to as many as 30 requests per page.
With all of these excessive requests, the template will be penalised by Google for potentially being too slow to load for the user.
The inbuilt CSS and JS compression for T3 not only joins, minifies and compresses the files for the template, it also optimised the additioanl CSS and JS files for your Joomla site in general.
Take the example of this unoptimised T3 output.
Now have a look at the same template but with all CSS and JS optimisation turned on.
You can see from the comparative screenshots that we have managed to reduce the output of the template from 39 included files to just 6 lines of optimised CSS and JS files.
Each resource can take between 500ms - 1000ms to just be requested from the server. With 39 requests on a good 500ms response time we get a total of 19,500ms which is almost 20 seconds just to request the files if called in sequence. Of course there are many other factors in play and most modern browsers would request and download files simultaneously but in a worse case scenario, you will be waiting at least 20 seconds for a browser to be waiting for a response from a server alone.
Fortunately T3 does have optimisation built in for us.
Full responsive layouts for wide desktop, 960 width desktop, tablet and small devices
The best thing about the framework is that it is completely responsive and designed for various different devices and screen orientations. Further more you can extend is and build in more snap points where the responsive layouts can take effect.
The T3_blank template that comes with the T3 framework is built on boostrap 2 and is based on the 1140px grid system.
This grid system is the wide screen version of the more commonly known 960 grid system which preceeded it.
The 1140px grid system was designed for most laptop screens where it works perfectly and of course wider desktop environments.
The later version of Boostrap, Boostrap 3 is based on the
Built in mega menu builder and off canvas navigation
T3 has always had an internal mega menu builder.
Real time customisation
T3 also has a real time template customisation and system that allows for basic overall customisation of the templates.
It doesn't allow you to customise everything from the view but it does let you get started.
Flexible layouts with drag selectable widths and responsive options
One of the best features in T3 is the flexible spot light areas in the template control that allows you to dynamicly change the widths of various module areas depending on what screen resolutions the user is looking at.
Font Awesome versions 3 and 4
Font Awesome is AWESOME.
Font Awesome allows you to easily embed and display an array of icons that get pulled into Bootsrap as a font. This makes the icons scalable, light weight and flexible on how they can be used.
Scalable means that these icons look amazing on high resolution screens and retina displays. Being pulled in as a font means it works on almost all modern browsers and of course is light weight.
If you want to learn more about Font Awesome, check out their website.
Flat design with two versions of the base template Blank
T3 comes with basic flat design templates that allow for ease customisation upon.
This section is free of charge :)
This introduction area of the T3 course is available free of charge for potential students to get an understanding of what this course is about.
Please subscribe for a subscription to gain access to the rest of the T3 course.