UIKit in Oxygen

This tutorial provides the steps to load UIKit in Oxygen and adding the required data attributes to the markup using jQuery for using the UIKit’s components.

In this example, I am going to show how to use these: Accordion, Align and Animation + Scrollspy.

Refer to UIKit’s documentation to see the list of Components available.

Step 1

Install and activate My Custom Functionality plugin.

a) Upload uikit.min.css to the plugin’s assets/css directory using a FTP client or cPanel file manager.

b) Upload uikit.min.js and uikit-icons.min.js to the plugin’s assets/js directory.

Create a file named data-attributes.js in the same location having:

(function($) {

// jQuery code comes here.

})(jQuery);

c) Edit plugin.php file and replace the code inside custom_enqueue_files() with

wp_enqueue_script(
    'data-attributes', plugin_dir_url( __FILE__ ) . 'assets/js/data-attributes.js', array( 'jquery' ), '1.0.0', true
);

wp_enqueue_style( 'uikit', plugin_dir_url( __FILE__ ) . 'assets/css/uikit.min.css' );

wp_enqueue_script( 'uikit', plugin_dir_url( __FILE__ ) . 'assets/js/uikit.min.js', array(), '3.0.0', true );

wp_enqueue_script( 'uikit-icons', plugin_dir_url( __FILE__ ) . 'assets/js/uikit-icons.min.js', array( 'uikit' ), '3.0.0', true );

Step 2

Accordion

Paste the following in the PHP & HTML section of a Code Block element:

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

and modify the above sample HTML to your needs.

Set the Width of the Code Block to 100%.

Align

Let’s show an image aligned to the left with text wrapping around it for device widths of 960px and higher.

Below 960px, the image should be centered.

Add a Div. Set its display to block.

Add an image inside, select/upload an image and set a width and/or height.

Add these classes: uk-align-center and uk-margin-remove-adjacent.

We also need to add the uk-align-right@m class but since Oxygen will not let us add it due to the @ symbol in the value, we are going to take jQuery’s help.

In the My Custom Functionality plugin’s js/data-attributes.js file, in between

(function($) {

and

})(jQuery);

add

$("#image-5-1735").addClass('uk-align-left@m');

where image-5-1735 is the ID of the image.

Animation & Scrollspy

a) Let us add a 50-50 Columns element and slide in the Left div from left and Right div from right as they enter and go out of the view.

Add a Columns element and select 50 50 layout.

Add your desired content in the left and right columns.

If you would like the column divs to have a box-shadow from UIKit, assign them these classes: uk-card, uk-card-default and uk-card-body.

Since we want to have some horizontal gap between the divs, remove the width values for both the column divs.

In js/data-attributes.js, add

$("#div_block-15-1735").attr(
    "uk-scrollspy",
    "cls: uk-animation-slide-left; repeat: true"
);
$("#div_block-16-1735").attr(
    "uk-scrollspy",
    "cls: uk-animation-slide-right; repeat: true"
);

Replace div_block-15-1735 and div_block-16-1735 with the IDs of the left and right divs.

b) Let us fade in the posts of an Easy Posts grid showing the featured image and title – one by one.

Add an Easy Posts element and configure the Query if needed.

Templates > Template PHP:

<div class='oxy-post'>

  <div class="oxy-post-inner">

    <a class='oxy-post-image' href='<?php the_permalink(); ?>'>
      <div class='oxy-post-image-fixed-ratio' style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'>
      </div>      
    </a>

    <a class='oxy-post-title' href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

  </div>

</div>

Template CSS:

%%EPID%% .oxy-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

%%EPID%% .oxy-post {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  margin-bottom: 3em;
  width: 33.33%;
  padding: 1em;
}

%%EPID%% .oxy-post-image {
  margin-bottom: 1em;
  position: relative;
  background-color: grey;
  background-image: repeating-linear-gradient(
  45deg,
  #eee,
  #eee 10px,
  #ddd 10px,
  #ddd 20px);
  width: 100%;
  display: block;
  border: 1px solid #ddd;
}

%%EPID%% .oxy-post-image-fixed-ratio {
  padding-bottom: 100%;
  background-size: cover;
  background-position: center center;
}

%%EPID%% .oxy-post-title {
  font-size: 1.2em;
  line-height: 1.2em;
  margin-top: 2em;
}

In js/data-attributes.js, add

$(".oxy-posts").attr(
    "uk-scrollspy",
    "cls: uk-animation-fade; target: > div > .oxy-post-inner; delay: 500;"
);

These are just a few examples of how to use UIKit in Oxygen. The key is to go through UIKit’s documentation to see what else can be done, decide on what component to use as applicable to your web project, observe its HTML markup, adding the classes in Oxygen to the extent possible and the remaining via jQuery. Custom data attributes are to be added using jQuery.