How to Update UIkit Components

Here’s the demo page that we’re going to create to demonstrate things:

Be sure to scroll down the page to notice how specific elements become sticky.

As with other UIkit tutorials, familiarity with this framework will be beneficial to follow along.

The Demo Project

Our page will consist of the following sections:

  1. The header
  2. The hero banner
  3. The posts

Here’s how it will look:

The page layoutThe page layoutThe page layout

Here are the important parts of the page markup:

Notice that we’re using different UIkit classes to build the layout. Beyond these predefined classes, there are also a few custom ones that will help us call specific elements via JavaScript.

If you are completely unfamiliar with UIkit, I’d recommend you to open your browser developer tools and inspect different elements to understand what all these classes are doing.

Update Components

Going into more detail, the page header will consist of two elements:

  • A notification bar
  • A sticky nav element with two child div elements. Note that the second div will be visible only on screens whose width is at least 960px.

The posts section will include the filters and grid.

Sticky

As we scroll down the page, the filters should remain sticky and sit underneath the sticky nav element.

The following JavaScript code will set them as sticky:

If we now print in the console this sticky element, we’ll see all its available options:

The sticky componentThe sticky componentThe sticky component

Pay attention to the offset property. Its value will be different depending on the screen size. Remember that the second div of the nav element will only be visible on screens that are at least 960px wide.

If we start resizing the page, we’ll notice that the filters won’t remain sticky at the expected position. This happens because we don’t update the offset value, but instead keep only the one that comes on page load. So, to make this component accurate we should add this piece of code:

Dropdown

If you click on the Toggle Filters button, you’ll notice there’s a dropdown. In a real scenario, this might include all post tags, categories, or any other taxonomy terms. Its width will change depending on the screen size.

That said, on screens up to 959px, it will look like this:

The dropdown layout on small screensThe dropdown layout on small screensThe dropdown layout on small screens

However, on larger screens it will be as follows:

The dropdown layout on large screensThe dropdown layout on large screensThe dropdown layout on large screens

Notice that, in the second case, the dropdown doesn’t cover the full parent width but grows just before the Apply Filters button.

To accomplish this requirement, we’ll first initialize a new dropdown component by using custom attributes like this:

Feel free to read the component’s documentation to understand the options we’re passing.

Next, we’ll get a reference to this component like this:

Again to see all the dropdown options, we’ll print it in the console:

The dropdown componentThe dropdown componentThe dropdown component

Notice the boundary parameter value. By default, we set this value to the form element which ensures that the dropdown will match its width. This is fine for small screens, but on screens that are at least 960px wide, its width should match the width of the .post-filters-form-inner element. So, to do this, we’ll add this condition:

Finally, to ensure that this condition will meet on window resize, we’ll add this piece of code:

You can check all the code needed by toggling the JavaScript tab of the demo.

Conclusion

That’s it for today, folks! This exercise showed how to update the options of two UIkit components, giving you enough knowledge for updating other UIkit components as well. 

Here’s our demo page as a reminder:

Last but not least, in the documentation, there’s some info on how to update a component by using the update event. Keep this in mind in case it’s needed. 

As always, thanks a lot for reading!

UIkit Tutorials on Tuts+

UIkit, in the developers’ own words, is a “lightweight and modular front-end framework for developing fast and powerful web interfaces”. It’s a really popular way of building front end interfaces, so get onboard with these tutorials!

Leave a comment

Your email address will not be published.