Our Easter promo offer is on! Join now or renew your subscription with 25% OFF! Read More

Blog

InspireTheme - Gantry 5 Templates and Particles

Hey guys, I have some really exciting news to share with you!

The last 10 days we were very hard at work in order to update all our Gantry 5 templates and implement the changes that we need in order to move forward. We have prepared some awesome things for you, so just keep reading :)

This update affects Oxygen, Milano and Paradise. We updated the "Update" section and added a "Required Atoms" section in the documentation for each template. We also updated the "Modules and Positions" section so it now tells which "Style" is used for the particular particle.

So, what's all that noise about? Well, let have a closer look at all the changes and what we have actually prepared for the very near future!

Introducing the "UIkit for Gantry5", "Template.js" and "ScrollReveal.js" Atoms

Until now we were hardcoding all of the above assets into the template using a template override of the page_head.html.twig file. This is really not the best approach so we decided to move all those assets into separate Atoms and just remove the template override. This decision actually opened the door for all the amazing things you will read about below :)

The big deal here is the "UIkit for Gantry5" atom. As you already know we use the UIkit Framework a lot. It's kind of integral part for all our templates and particles.

Until now we had a code in all particles that was making sure that the UIkit Framework is loaded. We removed that code from all particles and from now on we are making the "UIkit for Gantry5" atom a requirement, a dependency for some of our particles. The images below explain it all.


UIkit for Gantry5
Content Pro Particle

And do you know what the best thing about the "UIkit for Gantry5" atom is? We will release it for FREE! It will happen very, very soon so you might really want to like us on Facebook or follow us on Twitter and stay tuned!

"Template.js" atom - well, there's nothing fancy about that atom. It just loads the template specific JavaScript code, so you MUST have it loaded in your "Base" outline.

The "ScrollReveal.js" atom is an optional one. It adds the ScrollReveal.js functionality (onscroll animations) to your website. The best thing about making it into an atom, rather than hardcoding it into the template is that you can disable it anytime or replace it with the upcoming "WOW.js and Animate.css" atom. And quess what? We will release both of these onscroll animation atoms for FREE! Have a look at what I wrote about Facebook and Twitter above :D

Universal, Template Independent Particles

Until now our strategy was to modify our particles for each template so they can fit the particular design. Some particles needed just a small CSS modification, others needed a markup (HTML) change and some even needed to be completely re-written with completely new options being added.

We realized that this is really not practical and maintaining different versions of the same particle is just a nightmare. Imagine for example the following - a "Feedback" particle for Oxygen, a "Feedback" particle for Milano and a "Feedback" particle for Paradise. So, we came up with a brilliant idea - to make all particles universal, to make them template independent!

So, how all that works? - Well, we now have just one version of each particle. It means that the code for all particles is absolutely the same across all templates. This allows us to maintain just one version of each particle and this in turn allows us to treat each and every particle as a separate product, as a separate mini-product.

Alright, but how can you achieve different designs and styles with the same code? - Fear not! Here's how all that works - if the particle needs just some small CSS/styling changes like "border-radius", "box-shadow" and so on, we will do it from the template. It means that the template will contain some small CSS overrides for the particles that need that. If we need to modify the markup (the HTML code) or to make some major CSS changes we will add a new "Style" to the particle. And if we need to change the particle logic completely, we will release a new particle. Have a look at the images below, they explain everything.


UIkit for Gantry5
Content Pro Particle

And just to clarify it a bit more, in Oxygen we use "Style 1" of the "Feedback" particle, in Milano we use "Style 2" and in Paradise... in Paradise we changed the logic of the particle completely so we just introduced the "Feedback 2" particle.

By making all particles universal and template independent we actually got the chance to make something much bigger, something much more impressive.....

"Particles" section on our website (kind of a Marketplace)

Yeah, this is definitely the most exciting part! Very soon we will add a new Menu Item, a new page called "Particles". All our (template independent) particles will be listed there with a brief description, a demo link, a documentation link and a download link. You will also be able to filter them by "Particles" and "Atoms".

It will be just like a marketplace - you visit it, you browse the extended particle collection (currently 30+) and you download the one you want. Then you read the "Installation Instructions" (copy two files to your server) and voala - you have added a new functionality to your website! In the future, hopefully in 3, 4 months you will be able to install the particles directly from the Gantry 5 Admin. Have a look at this issue on Github for more details.

Many of the particles will be FREE and some will be premium, available to our club members only :)

And all these particles will work perfectly fine with all Gantry 5 templates on all platforms (Joomla, Wordpress and Grav)!

Until now we were adding as many particles as possible to our templates in order to give you all the features and functionality you might need. From now on we will add only the ones that are really needed for the particular template and its purpose. That's how we will keep it lightweight and optimized. And if you need additional functionality you just need to visit our marketplace and download the particle you want :)

Well, that's all for now. I hope you got excited in one way or another and please feel free to leave us a comment below :)

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!