This project contains a Gantry Atom and adds the Cookie Consent Javascript API functionality to the Gantry templating framework. Cookie Consent Neo encapsulates the parameterization of the Cookie Consent banner within a Gantry Atom. Furthermore, it provides an easy, user friendly and GUI assisted configuration and integration. In the current revision the following CMSs are supported:

Features and Support

• Full banner text and link customization
• Different color palettes, text and background customization
• Behavior control, layout and positioning
• Black- / Whitelisting and cookie configuration
• Good Cookie Consent Javascript API coverage
• Full control over resource loading
• Support for Joomla Plugin System

Languages

• English, German and Italian

Compatibility

• Joomla, Wordpress and Grav

Takes the HTML element you specify and makes it fixed to the top of the screen when the visitor scrolls

The "Fixed Header" atom takes the CSS selector you specify (it will usually be #g-navigation or #g-header) and loads a few lines of jQuery and CSS. The jQuery code does the following:

1. It wraps the specified HTML element with another DIV so your page does not "jump" when the header gets fixed.
2. It checks when the specified HTML element touches the top of the screen and adds the "g-fixed-element" class.
3. When scrolling back up, it checks when the specified HTML element reaches its original place and removes the "g-fixed-element" class.
4. If the option is enabled, it checks the device width and decides if the "g-fixed-element" class should be added or not.
5. If the option is enabled, it adds a second class ("g-fixed-second") when the user scrolls the specified number of pixels.

Then, the CSS code just makes the "g-fixed-element" element fixed. Optionally, you can add your own custom CSS in the custom.scss file using the "g-fixed-second" class and apply whatever effect you want.

Documentation InspireTheme

Demo Video

Loads the "headroom.js" script and provides some really nice options for your fixed/sticky header.

The "Headroom.js" atom basically does the same thing as the "Fixed Header" atom but additionally it loads the Headroom.js script and provides some really nice options. For example, with the "Animation" option, you can specify how the fixed element will get hidden - by sliding, swinging, flipping or bouncing :)

InspireTheme documentation

Demo Video

Loads a modified and optimized version of the UIkit Framework prepared specifically for Gantry 5

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. And most importantly, the UIkit framework does not break the backward compatibility by renaming classes and so on, while Bootstrap is well-known for doing that!

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.

InspireTheme documentation

Démo Vidéo

Easy on-scroll animations for web and mobile browsers.

ScrollReveal.js is a library to "easily reveal elements as they enter the viewport." It is very small in size, as its weight is roughly 9Kb. It has no dependencies, so you don’t need to add other libraries to use it. The animations are achieved by adding an HTML5 data tag attribute to the element. In addition to the nice effects it supports, what you will really love about this library is that you can use natural language to define the animation you want to run:

Ex : p data-sr="wait 0.3s enter left and move 100px over 0.5s"

The description of what should happen is all that is needed to get the animation going. The element starts off invisible, and once your browser window reaches the element it will wait for additional 0.3 seconds and then will enter from the left side and move 100 pixels to its end position (think of the move command as defining how far away from its final position the element should start from). How long will this animation take? By declaring over 0.5s the animation knows to get everything done within 0.5 seconds.

You can find the full list of available options and keywords in the ScrollReveal.js documentation on Github.

InspireTheme documentation

Démo Vidéo

Reveals animations (Animate.css) when the visitor scrolls

With the "WOW.js" atom you can reveal animations when the visitor scrolls. You need to add the "wow" class together with one of the Animate.css classes (animations) to an HTML element

WOW.js is a library which works with the Animate.css library to create great cross browser CSS3-based animations in your website. All you need to do is to add the wow class together with the class of the animation you want to trigger.

Ex : p class="wow bounceInUp"

Being a class-based solution, WOW.js is a great tool for any Joomla and Wordpress website, where you can easily add custom CSS classes.

You can find more details in the WOW.js documentation.

InspireTheme documentation

Demo Video