Uikit3 For Gantry5

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

Our Gantry5 Particles/Atoms are based on the Uikit 3 front-end framework. 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.


Uikit3 Atom Version: 2.1.1(Included Uikit 3.3.7) | Download
Requirements Most JoomLead’s Gantry5 Particles/Atoms are based on Uikit3 Framework. To get started right away, we recommend these first steps.

Important Starting from JoomLead Particles version 2.0.2, we changed the prefix from uk- to jl-. This even allows to use multiple versions of Uikit alongside each other.

# Uikit 3 Atom Package contents

The Uikit3 for Gantry 5 atom contains the compiled CSS and JavaScript files, twig and yaml files, which is everything you need to get started.
Files Description
jluikit.min.css/jluikit-rtl.min.css Contains the UIkit CSS and a right-to-left version.

By default, the Uikit3 atom load jluikit.min.css only, if your site support RTL, it will be replaced by jluikit-rtl.min.css

jluikit.min.js/jluikit-icons.min.js Contains the UIkit 3 JavaScript and the Icon Library JavaScript.

From Uikit 3 atom version 2.1.1, You can enable/disable Uikit icons if not needed via Atom settings to improved site performance.

jluikit.yaml/jluikit.html.twig Contains the Uikit 3 Gantry5 atoms.

Joomla Installation

Step1 Unzip the particle package.
  • Copy jluikit.html.twig and jluikit.yaml from particles folder to THEMENAME/custom/particles
  • Copy jluikit.min.js/jluikit-icons.min.js from js folder to THEMENAME/custom/js folder
  • Copy jluikit.min.css/jluikit-rtl.min.css from css folder to THEMENAME/custom/css folder
Step 2 Enable Uikit3 Gantry5 Atom via template configuration. Go to Joomla AdministratorExtensionsTemplates → 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 particle package.
  • Copy jluikit.html.twig and jluikit.yaml from particles folder to THEMENAME/custom/particles
  • Copy jluikit.min.js/jluikit-icons.min.js from js folder to THEMENAME/custom/js folder
  • Copy jluikit.min.css/jluikit-rtl.min.css from css folder to THEMENAME/custom/css folder
Step 2 Enable Uikit3 Gantry5 Atom via theme configuration. WP DashboardAppearanceThemes → 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. Avatar

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

  2. Avatar
    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>

JoomLead Gantry 5 Particles 2.1.0 released. New features, WCAG 2.0 accessibility and bug fixes See changelog
Sale 30% OFF Cyber Monday. Use the discount code CM2019 during checkout Buy Now