Uikit3 For Gantry5

  • Tony
  • 21 July 2018
  • 3 Comments
  • Docs

Getting Uikit3 for Gantry5 up and running takes no longer than a minute. Uikit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

Our Gantry5 Particles/Atoms are built on the front-end framework Uikit, to get started right away, you need to enable the Uikit 3 for Gantry 5 in your Gantry 5 Atom setting.

# 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.

You can enable/disable Uikit icons library if not needed via Atom settings to improved site performance.

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

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.

Copying Uikit files

Unzip the particles.zip package, navigate inside /particles/ folder then following the steps below:

    • Copy jluikit.html.twig and jluikit.yaml from particles folder to THEMENAME/custom/particles
    • Copy jluikit.min.js and jluikit-icons.min.js from js folder to THEMENAME/custom/js folder
    • Copy jluikit.min.css and jluikit-rtl.min.css from css folder to THEMENAME/custom/css folder
    • Copy jluikit.html.twig and jluikit.yaml from particles folder to THEMENAME/custom/particles
    • Copy jluikit.min.js and jluikit-icons.min.js from js folder to THEMENAME/custom/js folder
    • Copy jluikit.min.css and jluikit-rtl.min.css from css folder to THEMENAME/custom/css folder
    • Copy jluikit.html.twig and jluikit.yaml from particles folder to /user/themes/THEMENAME/custom/particles
    • Copy jluikit.min.js and jluikit-icons.min.js from js folder to /user/themes/THEMENAME/custom/js folder
    • Copy jluikit.min.css and jluikit-rtl.min.css from css folder to /user/themes/THEMENAME/custom/css folder

Enable Uikit 3 Gantry5 Atom

  • 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

  • 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

  • Grav Administration PanelGantry 5 → select the Base Outline then click to Page Settings

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

Tips

Starting from particle version 2.0.2 (December 18, 2018), we changed the Uikit 3 prefix uk- with jl- custom prefix to avoid the conflicts.

Using a custom prefix allows using multiple versions of UIkit on the same page, that means if you use Particles or Atom based on Uikit 2, you can use the particles/atoms with Uikit 3 on the same pages/posts/layouts without problems. See https://getuikit.com/docs/avoiding-conflicts

Usage: If you use custom code from Uikit doc, like button, the default look like this:

<a class="uk-button uk-button-default" href=""></a>

You can replace the uk- with jl- custom prefix like this:

<a class="jl-button jl-button-default" href=""></a>

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
    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

You must be logged in to post a comment.