Joomla! designers can choose among a large number of templates to use for website design. Using templates makes design process easier but serious designers prefer other solutions in order to present their clients a unique visual identity. One of the reasons is template "stiffness" (limited flexibility), a lack of documentation, non-responsive design and a lack of support for new web technologies. A solution in that case can be a development of the design from scratch or choosing one of the frameworks.
Choosing a framework is a logical step. In that case a designer doesn't need to build a template from scratch nor he or she needs to adjust a framework to each template because once you master it you accomplish your work faster and more efficient while minimizing expenses.
There are several good templating solutions for Joomla! CMS and the best among them will be described in this article. The framework that I personally prefer is Gantry 5 but there are companies which aim to place their products at the top.
It is important to differentiate a framework from a template, which means that in some cases we can use different templates for a certain framework of which some may be commercial which may affect the functionality of the framework. In other cases a template may be integrated in the framework and by downloading a template you get both.
For a framework to be included in the article it was important for it to be freeware, so the commercial solutions will not be described, but keep in mind that there are commercial templates. I will not focus on speed, despite the fact that it is a very important feature, but since it depends not only on templates but also on various things like server, amount of installed plugins, components and modules and various settings which can affect the loading time.
Gantry 5 Framework
As a main difference from a previous version, where positions were predefined, in the new version positions need to be added which requires an additional work from a designer, but this is not actually a bad thing because in this way a designer is in a position to decide a number, width and locations of new positions. Also, besides positions a designer can place modules and content (text and images) menus and other elements (branding, copyright, date, system messages, social networks links...) directly into a layout, and all that with ease via drag&drop. Layout can have an unlimited number of sections, rows and columns (I didn't go over 50) with an unlimited number of positions. This is enough to satisfy even most demanding clients.
Can you count created columns in the fourth row of the Main section?
Every instance of design (a template copy) can be applied to one of the menu items which means that it is possible to apply various designs to menu items. Practically this means that a landing page can be designed with a different layout than a "News" page. This also applies to other templates and frameworks but Gantry went one step further because it has a Base Outline theme which has settings that apply to all copies in which you can turn these settings on or off as you find suitable.
New users will appreciate a feature that allows them to place favicon icon directly from administration panel so that they don't need to upload it to a server. But Gantry comes with things which some designers might not find appealing. First, there is only one free template (Hydrogen). Second, Gantry 5 administration is full of features which may confuse even an experience designer. Even if you used Gantry 4 you will need some time to adjust to a new version. But, despite that, Gantry 5 is worth your time and effort. Designing a common template takes a lot more time than when you design with a framework.
What this framework lacks are, I would say trivial features like applying images as a background. You can call this an imperfection or we can say that Gantry 5 is intended for advanced users who rely on designing websites with CSS and classes. Because of this Gantry 5 may not be well accepted by non-coders, but finally it's up to us to consider this as a pro or con.
Documentation: 4 (direct technical support is reserved for commercial users)
Active (frequent updates)
Some features missing (parallax, image as a background for some layout elements)
Documentation doesn't provide CSS classes for elements like menu
Download Gantry 5 framework
Shape 5 Vertex
Right on its first use you can notice that Vertex framework is a polished product. Nearly every item in the settings and administration has a tooltip which explains in details what every item does and what it is intended for. Vertex surely has features that allows it to stand next to the strongest competition. Parallax effect is what places it above many when we speak about design-made-easy.This popular effect is applied easily in the elements settings when you apply image as a background. To each element you can also apply a background color but not fonts. Fonts can be administered for some elements of a design like Site Font for content and Highlight Font for headlines and menu. If you intend to use Vertex it may confuse you that Site Font manages menu fonts and Highlight Font manages drop down menu items.
Designing options are good. Administration interface allows you to adjust background color for highlights like headlines and menu items but also, as it comes as a nice feature, you can manage shadows for webpage body (shadow color, size and opacity). Menu comes with four animations: Slide, Fade, Slide & Fade and Snap. More animations wouldn't hurt but competition doesn't offer a lot more. Menu can be adjusted with opacity settings, animation speed and a useful Onclick For Tablets option which lets mobile devices users to open a dropdown menu with a touch (instead of leaving the page when you tap a linked dropdown item that leads to another page).
A useful feature is Floating Menu (to keep the menu at the top while scrolling down). If menu is set as floating menu there are additional settings to adjust like opacity, shadow, margins, paddig, border color, background color (Gradient Start, Gradient End) or a background image. Rich menu designing settings lets you do things faster.
Responsive design allows you to hide some elements. For example, if non-responsive modules are used, they can be removed from display on mobile devices like phones and tablets. If it's needed, zoom can be disabled.
Responsive design comes with off-canvas menu which can be stylized with background colors (Gradient Start, Gradient Stop) and fonts. What Vertex lacks is that CSS classes can't be applied to elements from administration. But on the other hand it offers fairly enough options for design.
Besides good designing features Vertex, just like Gantry 5, comes with a great layout editor. It's not as good as in Gantry 5, but it is also comes with drag&drop (which is limited to changing width of elements). Each section can receive up to 6 positions which is enough for common websites. Number of sections is limited but you probably will not need more than there is. Layout offers a Dropdown section and two tabs which can be positioned left or right.
Solid layout editor makes Vertex a good choice
Vertex is the only framework which, in my opinion, can stand next to Gantry 5. But, despite the fact that it comes with few features that Gantry lacks, Vertex doesn't offer a flexible enough layout editor to take the crown. Layout editor is not bad but it misses few features to make it even better. Designers-beginners will like designing features that don't require them to code but coders will hardly forgive a lack of fields to place custom CSS classes and a limited system for custom codes (there are "only" fields for <Head> and Bottom of Index.Php). There are several templates for Vertex but only Forte comes with the latest version.
Some features are lacking (CSS classes fields for elements)"Helix
Custom code features could be better
Download Vertex framework (Registration required)
Helix 3 framework
It needs to be said at the very beginning that Helix 3 framework is not meant for serious designers. Despite the claim that "Helix 3 is the best template framework for Joomla", and "the most powerful template building framework..." you probably are not going to use it in your web design company. On the other hand beginners and designers who need to get things done fast could use Helix 3. Among several freeware templates from the Joomshaper company one of them is developed with the newest version of the framework but there are several more developed with previous versions.
The case with this framework is that it is integrated with the template and it is not possible to use it with other templates. It comes with the Page Builder component which is also sold separately but with Joomshaper's framework you can use it with some of the freeware features which is probably going to be enough for most "recreational" designers.
This framework comes with Google fonts which can be applied to various elements of the content. Fonts can be used on a menu separately from content where other fonts can be applied to different Heading sizes (Heading 1, Heading 2…Heading 6), which means that the main heading can have a different font from subheading. Maybe you are not going to use this feature very often but it is available if you need it. I think that handling fonts is not good as it is in Gantry 5 because in Helix 3 it is not possible to sort fonts according to subsets (latin, latin extended, Cyrilic...). Subsets can be used but no sorting is possible which makes finding a right font with diacritic letters a real challenge.
Joomshaper company made a good job in an attempt to make their product user friendly. Designers can apply background color and images to layout elements, but also image position and image "behavior" (either static or scroll), margin, padding, or link color when hovered with the mouse cursor. All of that is possible to choose in the dropdown menu or by inserting values (for margin and padding). Just like Vertex, Helix 3 allows hiding elements depending on devices (mobile phones, tablets or laptops). In case when you have less important element system can hide it when it detects mobile devices to make room for more important content.
Another feature that many may like is Helix Shortcodes. There is an additional button created in the article editor which opens a list of shortcodes for which can be used in content. If you need tabs, accordions, Google maps, icons, gallery and such there is a shortcode for that. For some reason in the test session many of them simply didn't work but nevertheless this is a useful feature that many designers will welcome. I am not sure if it is a bug or something else but shortcodes don't work when applied to Custom HTML module.
Creating position for module
Position available for layout elements.
New position in the layout element
This way it is possible to create almost unlimited number of positions but maybe only experienced users might think of this way of doing things. Joomshaper should do more about placing elements in the layout editor. You can choose some predefined columns which is enough in most design requirements but this is not flexible enough in some instances.
Helix 3 framework offers predefined columns in layout
All in all, Helix 3 framework is a good choice for beginners and for those who want to try "new stuff" but I want to make clear that it is not flexible and reliable enough for serious designers.
Good for beginners
Lack of advanced features
Layout is not as developed as expected
Shortcodes sometimes don't work
Not flexible enough
Download Helix 3 (Registration required).
T3 je is a full feature framework which will satisfy many designers who avoid coding. It offers many options for template design, but it also comes with several limitations which will give a lot of troubles to serious designers but alsoto some beginners.
Layout comes with predefined positions which can be changed by choosing one of several options (corporate, magazine, portfolio...). Positions and their layout can't be placed as desired as it was the case with Gantry 5 and Helix 3 frameworks and there is no drag&drop. This doesn't mean that there is not enough positions to work with, but T3 may limit your design in case when your client has some innovative ideas.
T3 doesn't offer a Google Font support, but only few fonts which can be used in a template. It is still possible to use Google fonts in the Custom Code section in the predefined <head>, Before </head>, After <body>, Before </body> boxes or in ThemeMagic section where you can use fonts in External CSS Urls box. But this is not as practical as in some other frameworks.
T3 also doesn't offer to choose favicon nor a predefined place for Google analytics code.
ThemeMagic is very good for design. It offers several options to choose background color, font, moduls and to design some parts of the layout (Spotlight Styles i Footer Styles). With the Preview button you can see what your design will look like before applying it to the website. It is possible to save your design with new name and to apply it as a new theme. But it is not possible to ad background images as in Vertex and Helix frameworks.
ThemeMagic is one of the great features of T3 framework
Mega Menu is also one of the strong sides of T3 framework. You can add submenus which can contain modules, articles, videos, images and even positions. It is also possible to add columns to place more than one elements in submenus. Each submenu can hold css classes but classes can't be assigned to layout elements as is is possible with Gantry 5, Helix 3 and Shaper 5 frameworks.
I am not sure if it was an error with installation or it was technical requirements but I couldn't make it work with free templates. I could access backend administration, but frontend kept displaying an error that plugin wasnt activated. Template worked great in quickstart package which is actually Joomla with integrated framework. This is not the problem if you intend to use the framework on a fresh install, but it it may be a problem if you want to install it on a developed website.
Is it enough for a serious designer? Surely T3 framework comes with strong features such as Mega Menu and ThemeMagic editor but the lack of other common features is not enough to satisfy needs of a serious designer.
Good Mega Menu editor
Lack of advanced featuresNedostatak naprednih mogućnosti
Layout not as developed as expected
Not flexible enough
Download T3 framework
Gavern comes with Cookie Consent plugin which, when enabled, informs visitors about cookies. This is not something that beats the competition because there are third party plugins for the same thing but it is nice to have it integrated in the core template.
Cookie Consent plugin informs visitors about cookies
One of the things that I consider most important in frameworks is layout which is not bad in Govern. It doesn't support drag&drop but it is easy to understand and works good. Predefined sections come with predefined positions but you can add more fields with the Add button following Bootstrap grid rules which means it's possible to add up to 12 fields. In real world it means that you can add for example two fields with 6 columns, 4 fields with 3 columns, or 3 fields with 4 columns or one field with 7 columns and one field with 5 columns or one field with 7 columns with one field with 3 columns and one field with 2 columns. Various combinations are possible as long as their sum is of columns gives 12.
Gavern layout editor
It is not possible to asign CSS properties to layout elements, like background color or font, nor CSS classes which is a big drawback. Elements can only be assigned to positions. On the technical note Gavern is a solid and stable framework but I should add that main menu wasn't visible during my test for unknown reason.
Final conclusion is that Gavern is not my first choice and I think that there is a lot room for improvements.
Cookie Consent plugin
Squirel and Adobe fonts
Lack of advanced features
Layout not as developed as expected
Not flexible enough
Download Gavern framework