Our Autumn Sale is on! Join now or renew your subscription with 25% OFF! Read More

Blog

UIkit for Gantry 5 - Gantry 5 Atom
You can find all particles and atoms in our Particle Marketplace.

We are really happy to announce the release of one very special freebie - meet the "UIkit for Gantry5" atom!

You might be wondering what is so special about it? Just keep reading and you will see for your own. It is kind of "the missing piece" in the Gantry 5 framework.

You might also be wondering why we release such an atom and make it look so special, when you can just load the UIkit assets on your own, from the "Page Settings" tab? Well, let's get started so you can see what the "UIkit for Gantry5" atom is all about and why we think that it is just awesome!

The "UIkit for Gantry5" Atom

First of all, let me explain what UIkit is. UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. In general, it is kind of the same thing as Bootstrap (a front-end framework), but it is lighter, it is more flexible and it comes with some really awesome and quite advanced components that are still missing in Bootstrap.

As you probably already know, the Gantry 5 framework comes with its own, very basic, front-end framework called Nucleus. The really awesome thing about Nucleus is that it uses the Flexbox model but Nucleus in general does not offer any JavaScript goodies, there is no JavaScript code at all, it is a pure CSS (SCSS) framework.

So here comes the "UIkit for Gantry5" atom, the missing piece in the Gantry 5 framework!

We are maintaining a modified and optimized version of the UIkit framework. Here are the things we did that show why using the atom is incomparable to loading the UIkit assets manually:

  1. If you load the original UIkit assets manually your website will change its look and will become quite messy. The reason is that the core HTML styles from UIkit are in conflict with those from Gantry 5. So, since Gantry5/Nucleus already provides the core HTML styles, we removed them from UIkit (styles for html, body, a, img, p, ul, h1-h6 and so on).
  2. We removed the Print component from UIkit because you already have it in your Gantry 5 template and we also removed the Contrast component because it is not really needed.
  3. We packed everything together in just two files (uikit.min.css and uikit.min.js). That's how we reduce the HTTP requests to the server and therefore you get a better performance.
  4. We did some other small improvements and modifications so it works absolutely flowlessly with the Gantry 5 framework.
  5. Well, we coded it into an atom, so you just need to drag & drop it in your layout :)

And here are the things you get by simply installing and enabling the "UIkit for Gantry5" atom (these are the most noticeable ones, you actually get much more that that). And yes, the "UIkit for Gantry5" atom is totally platform independent (as all our particles and atoms) so you can use it in both Joomla and Wordpress.

  1. Additional Grid/Columns options.
  2. Additional Utility classes.
  3. Great eye-catching Animations.
  4. The so needed and useful Modals.
  5. Scrollspy detection.
  6. Smooth scroll everything you want.
  7. You need a Dynamic Grid for your Portfolio and Gallery, right?
  8. Oh boy, Lightboxes, really?
  9. Everybody needs a Slider.
  10. Or you prefer a Slideset?
  11. What about a Slideshow? Psst, we already provide this as a FREE Particle :)
  12. Accordion and Tabs. Yeah, we provide those as a FREE Particle as well.
  13. Parallax... yeah, you heard it right.
  14. Sticky Header or make everything else sticky. For a Fixed/Sticky header you can also use our free Atoms :)
  15. How often do you think about Tooltips?

You can use all of the above goodies in your articles or you can use them to build some really awesome and powerful particles! This is exactly what we do - we use the UIkit functionality in our own particles.


UIkit for Gantry5
Content Pro Particle

Updated Particles

As you probably already know, we frequently release FREE particles and atoms. Now, with the release of the "UIkit for Gantry5" atom, we updated all our particles so they use it as a dependency. We also updated the documentation for each and every particle to reflect the changes and we included a separate "Installation Instructions" for Joomla and Wordpress.

We also made all our particles and atoms to call the jQuery library when/if needed in Wordpress as well (until now our particles did that in Joomla only).

Well, this is it for now guys. Now just go ahead and download the "UIkit for Gantry5" atom and do not forget to leave us a comment below saying what you are using it for, or just to say "Hi" :)


UIkit for Gantry5 atom

UIkit for Gantry5 Atom

The "UIkit for Gantry5" atom loads a modified and optimized version of the UIkit Framework prepared specifically for Gantry 5.

Demo Video Documentation Download
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!