Uikit3 For Gantry5

Getting Uikit3 for Gantry5 up and running takes no longer than a minute.

Our Gantry5 Particles/Atoms are based on the front-end framework UIkit. Uikit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
Installing the “UIkit3 for Gantry5” atom on your website is a really simple process. You just need to follow the below instructions depending on the platform you are on.
Version: 2.0.1 | Changelog | Download

Requirements Most JoomLead’s Gantry5 Particles/Atoms are based on Uikit3 Framework. To get started right away, we recommend these first steps.

Package contents

The Zip file contains the compiled CSS and JavaScript files, twig and yaml files, which is everything you need to get started.

Files Description
css Contains the UIkit CSS and a right-to-left version.
js Contains the UIkit JavaScript and the Icon Library JavaScript.
uikit.yaml/uikit.html.twig Contains the Gantry5 atoms.

Joomla Installation

Step1 Unzip the package Uikit3-Gantry5.zip.

  • Copy uikit.html.twig and uikit.yaml to THEMENAME/custom/particles

  • Copy all js files (if any) to THEMENAME/custom/js and all css files (if any) to THEMENAME/custom/css

Step 2 Enable Uikit3 Gantry5 Atom via template configuration. Go to Joomla administrator -> Extensions -> Templates -> select your Gantry5 template/theme -> choose Base Outline then click to Page Settings

Scroll down to Atoms section -> select Uikit3 for Gantry5 then enable it

WordPress Installation

Step1 Unzip the package Uikit3-Gantry5.zip.

  • Copy uikit.html.twig and uikit.yaml to THEMENAME/custom/particles

  • Copy all js files (if any) to THEMENAME/custom/js and all css files (if any) to THEMENAME/custom/css

Step 2 Enable Uikit3 Gantry5 Atom via theme configuration. WP Dashboard -> Appearance -> Themes -> Select your Gantry5 based theme -> choose Base Outline then click to Page Settings

Scroll down to Atoms section -> select Uikit3 for Gantry5 then enable it

Video Tutorial

This tutorial shows you how to install the Uikit 3 Gantry 5 atom for Joomla, you can do the same steps for WordPress CMS

That’s it! Now you should be able to use the particles that built with Uikit 3. For more info, please take a look the Particle documentation here

Comments

  1. Hi Maurizio,
    Uikit3 for Gantry included brandnew uikit3 css/js files. Did you enable Uikit3 for gantry5 atom before?

  2. maurizio mantneo

    HI,
    I enable Uikit3 for gantry5 atom:
    UIkit Version: 2.27.4
    Components Included:
    Core, Dynamic Grid, Dotnav, Progress, Slidenav, Lightbox, Slider, Slideset, Slideshow, Parallax, Accordion, Notify, Sticky, Tooltip
    JS Location FOOTER
    I see a black banner but not the particle?!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>