Joomla! Templates and Comparison of Frameworks

Joomla! Templates & A Comparison of Frameworks

by Saurabh ShahFront-End Developer

Joomla! Day Malaysia 2011

Joomla Popularity Joomla is popular open source content management system which is used to built websites.

Reason behind its extensive popularity are : Freely available and no individual is required to pay huge amounts for the purpose of licensing it. Joomla is easy to use and having extremely flexible features which help in the creation of wide variety of websites, such as personal websites, educational websites, E-commerce applications and corporate websites and many more. One of the benefits of using Joomla web design services is that, users can easily update and maintain web pages from time to time.


Demo.joomla.org partnered with cloudaccess.net

Demo.joomla.org has partnered with CloudAccess.net, since May 2010 The demo.joomla.org, created in partnership with CloudAccess.net, has all the standard features of Joomla! and gives each user a completely dedicated space to experience Joomla! without having content lost or overwritten. They can install extensions, add users and experience the full power of the Joomla! CMS.


Demo.joomla.org partnered with cloudaccess.net(conti…)

We allow users to maintain the integrity of their content, and continue to build and learn over an extended trial period. Each demo site user will get a free, complete, dedicated installation of the Joomla! CMS. Users sign up, verify their email, and start building with complete customization capabilities. After 30 days, a user can easily migrate the site to another host or sign up with CloudAccess.net for an ongoing account.



We allow users to maintain the integrity of their content, and continue to build and learn over an extended trial period. Each demo site user will get a free, complete, dedicated installation of the Joomla! CMS. Users sign up, verify their email, and start building with complete customization capabilities. After 30 days, a user can easily migrate the site to another host or sign up with CloudAccess.net for an ongoing account.



Demo site users have the option to continue to be hosted at CloudAccess.net at the end of the 30 day period


Table of Contents What is Template ?

Joomla! Templates

Joomla! Template Framework

Advantages & Disadvantages of using a framework

List of frameworks available in the Market

Comparison between most popular frameworks T3 & Gantry

Future of the Framework for Future Joomla! Versions


Legacy websites

Initial stage of templating - static header , footer , left , right , nav & changing content

Example: Photo frame , where border outside the photo frame is the same always but just photos are getting changed. So the border of the photo frame is template.

What is Template ?


Joomla! Templates A template is the type of Joomla! extension that changes the way your site looks. There are two types of templates: Front-end Templates and Back-end Templates.

Joomla Template also allows users to override the view of how extensions look.

You can change the view of the extension by two ways css override & template override

a) Componentsb) Modulesc) Plugins


Template in Joomla! (Cont…)Components are the main functional units that display in your template, like the content management system, contact forms, Web Links etcThey are usually displayed in the center of the main content area of a template (depending on the template structure).


Component is under the red border

Template in Joomla! (Cont…)Modules are lightweight and flexible extensions used for page rendering. These modules are mostly visible as the “boxes” that are arranged around a component on a typical page.Example: the login module, Polls Module etc.


Module is under the green border

Plugins: provide routines which are associated with trigger events within Joomla. When a particular trigger event occurs all plugin routines of the type associated with the event are executed in sequence.

Joomla! Plugins enable you to execute code in response to certain events, either Joomla! core events or custom events that are triggered from your own code. This is a powerful way of extending the basic Joomla! Functionality

Example : Comment system

Template in Joomla! (Cont…)


What is Framework ?All in one solution !

Framework can be defined as a set of tools , libraries,conventions and best practices that attempt to abstract routine task into generic modules that can be reused.

Goal:"The goal behind using the framework is to reduce time spent on repetitive task , allowing the designer or developer to focus on task that are unique to a given project rather than reinventing the wheel each time around"


Things that can be abstracted

Browser Resets

Base Typography

Basic styles for Forms

Generic / reusable classes

Template overrides

Grids (Optional – can be abstracted)


Advantages of using a frameworkIncrease Productivity

Avoid common mistakes

Better team workflow

Optimal browser Compatibility

Optimal mobile compatibility

Various amount of prepared Template Features (optional)

Bigger community Help


Disadvantages of using a framework

Need time to understand the framework

Limitation of the framework to add new features

Could inherit someone else’s bug


List of FrameworksCommercial Frameworks

YjSimpleGrid Framework (You Grids)http://www.youjoomla.com/

Morph Framework (Morph)http://www.joomlajunkie.com/

Motif Framework (themeable)http://www.themeables.com/ JEZ Thema Framework (JEZ Thema)http://www.joomlaez.com/

Zen Grid Framework (Commercial)http://www.joomlabamboo.com/

Warp5.5 Framework (Commercial)http://www.yootheme.com/warp/


List of FrameworksGPL Free Frameworks

JA T3 Framework (Blank)http://www.joomlart.com/

Gantry Framework (Gantry)http://www.rockettheme.com/http://www.gantry-framework.org/

Rumi Framework (Rumiframework)http://rumi.vandenito.com/ Construct Frameworkhttp://joomlaengineering.com/

Gavern (Gavik Themes)http://wiki.gavick.com/joomla-templates/templates-for-joomla-1-6/gavern-framework/gavern-framework/





T3 Gantry


Taken Fromhttp://magazine.joomla.org/issues/Issue-Jul-2010/item/81-Joomla-Template-Tools-Part-One

http://magazine.joomla.org/issues/Issue-Aug-2010/item/114-Joomla-Template-Tools-Part-Two

http://magazine.joomla.org/issues/Issue-Sept-2010/item/197-Joomla-Template-Tools-Part-Three

Advantages of Gantry960 Grid System (http://960.gs) for simple consistent layout. 12 and 16 column supportPer-menu control over all Gantry functionalityAbility to save/remove custom presetsBuilt-in AJAX SupportiPhone and iPod Touch mobile autotheme supportBuilt-in Gantry RokGZipper to compress and combine Gantry JS and CSS filesCleaner more understandable index.php. All the complicated bits are handled for you in the Gantry core.Flexibility to configure up to 6 modules in row position.36 possible combinations for the layout of the mainbody/sidebars alone!65 base module positions. Easily add more!Flexibility to configure different grid-size layouts based on number of published modules. You are not forced to use the same grid layout for every page12 built-in Gantry Features like Logo, font-sizer, to-top smooth slider. Easily create your own to add more functionality with little coding required. Visit http://www.gantry-framework.org for more …


http://www.gantry-framework.org/

Disadvantages of GantryThere are so many options, it might be overwhelming to new people;Additional Gantry-specific Template commands (although these are well documented);Can be complex to debug;Easy to create Interfaces that are heavy on Javascript and slow if you are not careful.


Advantages of T3Getting started :Excellent & extensive step-by-step documentation for creating a template from scratch, defining blocks, module positions, creating and specifying module chrome, adding IE 6 alerts, RTL support, and so on, for use by novice users and serious template developers and site designers Menus: several attractive menu options, including a Mega Menu that is tightly integrated with the Core Menu Items and allows the assignment of Modules, such as the Login Module, or embedded video within the Menu Item definitionLayouts: several popular layout options like newspaper layouts with column and row options, grid layouts for galleries or eCommerce applications, and a standard "full" layout, all with header and footers and ability to create new and adapt existing layoutsStyling: clearly marked class and id structures for layouts, typography options, Handheld devices: support for iPhone and Handheld devices, and instructions for customizationThemes: ability to use, create, and store collections of configuration options into "themes" that can be assigned to Menu ItemsTemplate Manager Enhancements: user friendly Ajax driven interfaceFree and GPLVisit http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Overview for more ...


http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Overview

Disadvantages of T3Template Manager JavaScript: Heavy JavaScript usage within the Joomla! Template Manager Additional Installation Elements: While it uses the normal Joomla! Installation process, the installation of a Component and two Plugins is also required New users: The range and depth of options could be overwhelming for very new users


Future Framework for Future Joomla! Versions

Should support CSS3 for all browsers Should support HTML5 or able to create HTML5 templates May be automated drag and drop support which can create module positions according to the boxes. Equal heights for modules (optional) May be all framework creator should be togather to create “awesome” single framework Should support and only one template specific css file for all Joomla! Versions Personal working experience about framework You can tell more / suggestions …


6 MONTHS FREE HOSTING & FREE DOMAIN


Thank you

Saurabh Shahwww.CloudAccess.net

Twitter : @saurabhshahEmail : [email protected] [email protected]


Technology

Joomla! Templates and Comparison of Frameworks