What Is Gantry 5, and How Does it Differ From Gantry 4?

Photo atop piece is adapted from “{Explore}” by Marius Brede (Flickr, Creative Commons).

For the past many years, my company has specialized in building web sites using the Joomla platform as the framework and CMS aspect of nearly all sites developed. On top of that, we quickly gravitated to the (arguably) most popular design platform used atop Joomla web sites — Gantry. Until Gantry 4 (G4 herein), Gantry was basically a continually evolving design platform.

Gantry 5 (G5 herein), however, represented a new direction. As of the launch of G5, the Gantry platform became more or less two distinct platforms. G4, as far as I can tell via various RocketTheme blogs and mentions, will remain supported by RocketTheme, and perhaps even developed further. I sense they may well kind-of wish they could leave it behind and just go on with G5 solely. But, as G4 powers such a massive number of web sites, they likely continue with it for a good long time.

We’re still building out new web sites using G4, as it’s still a superb, incredibly stable platform. But, as RocketTheme has devoted its theming efforts exclusively to G5-based themes (with a fine assortment of attractive G5 themes available as of this writing and scores of G4 ones), it’s only natural that clients are beginning to gravitate more toward these newer themes as desired starting points for their web sites.

What I’d like to do is offer a run-down (fairly brief) of many of the more exciting features of G5, with various commentary suitable for users and developers alike. I’ll try to include some commentary about how any of this differs from G4.

So, what we have in the world of Gantry are two distinct design platforms, G4 and G5, that share a few core similarities (e.g., in terms of how configuring module positions work), but with significant changes in many other areas. Some of the changes are in kind of “Ajaxifying” or visualizing the same sorts of things we had before — and that’s always very nice. The new visual menu editor is a great example of that one, as it’s super-handy to now have this tool to use and should save everyone involved a lot of hair-pulling.

Other items, such as the new layout manager, not only build upon general concepts of G4, but really take them to a much more dynamic place. Where previously, in G4, you’d specify, say, two positions in a “header” area, and have to choose between preset proportions (e.g., “2:10”, “3:9”. “4:8”, “6:6:, etc.”) for those two, the proportions are now totally drag-and-drop-dynamic, and configurable to any percentage desired. So, that’s a pretty good example of really building on a concept already largely worked out years ago, but making it much better. This will likely save people a lot of time, as sometimes you’d really need maybe something a little wider than one setting, but not as wide as the next, and thus had to make more custom CSS rules to adjust such a thing.

Looking over G5’s own documentation gives a good glimpse of the various priorities one might infer for the project. #1 on their features list is responsive design, which was a priority of G4 as well. Oddly, when you do a search for “Gantry5 responsve,” the results are somewhat sparse, as there are no easily-findable tutorials or documentation dedicated to responsive documentation for G5. That said, one assumes that prior knowledge of G4’s responsive classes should suffice. Even those could be perhaps more prominently featured on the sample G5 themes or in the G5 documentation site, as newbies aren’t going to easily find resources as it is. Some of the better ones include:

Also key to Gantry5 is the YAML / Twig pairing, which allows power-users to do some amazing things in terms of customizations. Very broadly, these can be thought of as web-specific development tools that allow more intrepid, tech-oriented designers the ability to affect some real change and customizations into/onto a given or new theme without having to develop a more broad/deep understanding of PHP.

These aren’t something a casual web builder will need much, nor (really) tools that an experienced programmer would necessarily need. But, I think it hits the sweet spot of making some of the more tech-oriented types of web possibilities more accessible to a larger group of people. Plus, they do each have solid pluses in terms a fierce dedication to clean / presentable / accessible code.

Ok, So What Do YAML and Twig Actually DO?

In G5, there was a motivation to become less dependent on the underlying platform (in this case Joomla, but G5 has ambitions to run over numerous potential platforms, and I believe already works on Wordpress). We’ve sort of seen some hints of this in earlier RocketTheme extensions, such as RokSprocket, which always did allow you to input content right into the module instance, or you could work with existing Joomla content.

So, it’s the same (sort-of) approach here, only more global in ambition. This time, the entire design platform allows you to basically work either (1) with the underlying CMS (e.g., Joomla’s content or its modules), or (2) you can simply input text / HTML / images / etc., right inside G5. In order to do that, they no longer refer much to “modules” per se. Things seem to be referred to as “blocks” — and such blocks can be either normal Joomla modules, or they could be G5 “particles”. So, think of particles as basically modules, and you’ll be a-ok. What this means is that, for a very small site, you might not need a CMS at all any more. Or, you may only need it in a limited way.

Anyway, back to “particles,” which stands out to me as the main concept G4 people need to wrap their heads around… In this case, let’s say you want to have a particle that can be used in various places in your site w/ the same general features. You’d like it to display a user-selected picture, some user-input text, a link, and maybe have a user-defined headline and headline color. All of that stuff could be different for each instance of the particle.

Now, in G4, you’d probably approach this be either writing a formal module or doing a custom HTML one and copying it X times, placing it where ever needed. But, G5 allows a much cooler solution. Let’s say this will be a particle called “Cool Pic”, where the user can say “okay, I want a Cool Pic particle here, and there, and elsewhere… but then maybe after placing 5 or 10 of them around, you want to change something on a global level like not only having the title link to the URL input, but also the photo.

Well, a custom particle would allow this, and with *considreably* less new code than creating a formal Joomla module would require. That’s one place where the YAML / Twig pairing comes into play. The YAML file basically defines the various fields that you’ll be asking for anytime someone instantiates such an instance of your Cool Pic module, and then the Twig file takes the data received and outputs the HTML, as specified. So, any such global changes could then be easily made by simply tweaking the Twig file (or the other one, depending on what you want to change).

As you’d hope, Gantry organizes all of this fairly well for you, although you need to set up much of it manually. But, as long as you’re keeping everything in your template’s “[template]/custom” directory, you won’t lose anything when you upgrade. That’s a super-important best-practice… always keep your customizations there!

Important Resources for this:

I think what’s perhaps most exciting about these things, as I hinted at earlier, is that the more developers take to using these, the more we should see from everyone in terms of theming innovations. That ought to be great news for RocketTheme, and alone should help illustrate perhaps just why G5 is such a critical move for them. A rising tide, they say, raises all ships. And, with these tools, more people are going to be entering the realm of proper theme development. I’d envision some cool particle-swap sites emerging somewhere, if none exist yet.

Another win-win result of this is that these tools allow developers to create an interface for (potentially) clients to interact with, as many clients like to hire a developer to set things up, but then they like to be able to go in and customize things as needed. Rather than asking them to go in and mess around with HTML, these customized back-end forms run by YAML and Twig help make the “administrator experience” (AX, as opposed to UX) a bit more pleasing. (BTW, I just searched Google for “AX” and “Administrator Experience” … I believe I may have just coined that term!)

This could well be indicative of a welcome future direction for everyone, as one of the more common concerns I hear from clients is that they’re just not comfortable around code of any kind. Give them a form, though, no matter how buried it is, and they’ll fill it out happily. It’d be interesting to see if, in the future, specific particle interfaces could be brought into some standard *other* area within the Joomla or Wordpress administrator so that clients wouldn’t have to navigate the various template screens to get to these. But, I imagine that’s a good way off, if even practical.

Other features of G5 include “atoms”, which are basically invisible particles (handy for inserting code onto a page, for example), further integrations with YAML (aside from particles), LESS and SCSS support (always handy as sites become more complex and CSS rules get tougher to manage), an undo/redo feature that looks to be a life-saver, and much more. To be honest, I’m still getting used to G5 after specializing in G4 for so long, and expect that will last a while. But, I do like it so far. From time to time, I’ll try to post some updates about how to do various things within G5, as some things are simply fundamentally different from G4.

Essential Resources

Jim Dee heads up Array Web Development, LLC in Portland, OR. He’s the editor of “Web Designer | Web Developer” magazine and a contributor to many online publications. You can reach him at: Jim [at] ArrayWebDevelopment.com.