Methods to Replace UIkit Elements

Right here’s the demo web page that we will create to reveal issues:

You should definitely scroll down the web page to note how particular components turn into sticky.

The Demo Undertaking

Our web page will encompass the next sections:

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

Right here’s the way it will look:

Listed here are the necessary elements of the web page markup:

<header class="page-header">
  <div class="notification uk-background-muted uk-text-center uk-h4 uk-margin-remove">...</div>
  <nav uk-sticky>
    <div class="uk-background-secondary uk-light uk-padding uk-padding-remove-horizontal uk-h3 uk-margin-remove">...</div>
    <div class="uk-background-muted uk-padding-small uk-padding-remove-horizontal uk-text-center uk-h4 uk-margin-remove uk-visible@m">...</div>
  </nav>
</header>
<part class="uk-background-cover" uk-height-viewport="offset-top: true" fashion="background-image: url(unsplash-posts.jpg);"></part>
<part class="uk-margin-large-bottom">
  <div class="post-filters uk-background-secondary uk-light uk-padding uk-padding-remove-horizontal uk-h4">
    <div class="uk-container">
      <kind class="post-filters-form uk-flex uk-flex-middle uk-flex-between">
        <div class="post-filters-form-inner uk-flex-1">
          <button class="uk-button uk-button-default" sort="button">TOGGLE FILTERS</button>
          <div class="post-filters-dropdown" uk-dropdown="mode: click on; boundary: .post-filters-form; pos: bottom-justify">ALL FILTERS HERE</div>
        </div>
        <button class="uk-button uk-button-default" sort="submit">APPLY FILTERS</button>
      </kind>
    </div>
  </div>
  <div class="uk-container uk-margin-large">
    <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
      <div class="uk-flex">
        <article class="uk-card uk-card-secondary uk-card-body uk-width-1-1">
          <h3 class="uk-text-center">...</h3>
          <p>...</p>
        </article>
      </div>
      <!-- extra playing cards right here -->
    </div>
  </div>
</part>

Discover that we’re utilizing totally different UIkit lessons to construct the format. Past these predefined lessons, there are additionally just a few customized ones that can assist us name particular components by way of JavaScript.

In case you are utterly unfamiliar with UIkit, I’d advocate you to open your browser developer instruments and examine totally different components to know what all these lessons are doing.

Replace Elements

Going into extra element, the web page header will encompass two components:

• A notification bar
• A sticky nav ingredient with two baby div components. Be aware that the second div shall be seen solely on screens whose width is not less than 960px.

The posts part will embrace the filters and grid.

Sticky

As we scroll down the web page, the filters ought to stay sticky and sit beneath the sticky nav ingredient.

The next JavaScript code will set them as sticky:

const pageHeader = doc.querySelector(".page-header");
const nav = pageHeader.querySelector("nav");

const postFilters = UIkit.sticky(".post-filters", {
  offset: nav.offsetHeight
});

If we now print within the console this sticky ingredient, we’ll see all its accessible choices:

Take note of the offset property. Its worth shall be totally different relying on the display dimension. Do not forget that the second div of the nav ingredient will solely be seen on screens which are not less than 960px vast.

If we begin resizing the web page, we’ll discover that the filters gained’t stay sticky on the anticipated place. This occurs as a result of we don’t replace the offset worth, however as a substitute hold solely the one which comes on web page load. So, to make this element correct we must always add this piece of code:

window.addEventListener("resize", perform () {
  postFilters.offset = nav.offsetHeight;
});

Dropdown

In case you click on on the Toggle Filters button, you’ll discover there’s a dropdown. In an actual state of affairs, this may embrace all put up tags, classes, or another taxonomy phrases. Its width will change relying on the display dimension.

That stated, on screens as much as 959px, it can seem like this:

Nevertheless, on bigger screens it will likely be as follows:

Discover that, within the second case, the dropdown doesn’t cowl the complete mum or dad width however grows simply earlier than the Apply Filters button.

To perform this requirement, we’ll first initialize a brand new dropdown element through the use of customized attributes like this:

<div class="post-filters-dropdown" uk-dropdown="mode: click on; boundary: .post-filters-form; pos: bottom-justify">
  ALL FILTERS HERE
</div>

Be at liberty to learn the element’s documentation to know the choices we’re passing.

Subsequent, we’ll get a reference to this element like this:

const dropdown = UIkit.dropdown(".post-filters-dropdown");

Once more to see all of the dropdown choices, we’ll print it within the console:

Discover the boundary parameter worth. By default, we set this worth to the kind ingredient which ensures that the dropdown will match its width. That is effective for small screens, however on screens which are not less than 960px vast, its width ought to match the width of the .post-filters-form-inner ingredient. So, to do that, we’ll add this situation:

...

if (mqMedium.matches) {
  dropdown.boundary = postFiltersFormInner;
}

Lastly, to make sure that this situation will meet on window resize, we’ll add this piece of code:

...

window.addEventListener("resize", perform () {
  if (mqMedium.matches) {
    dropdown.boundary = postFiltersFormInner;
  } else {
    dropdown.boundary = postFiltersForm;
  }
});

You may examine all of the code wanted by toggling the JavaScript tab of the demo.

Conclusion

That’s it for right now, people! This train confirmed the right way to replace the choices of two UIkit elements, providing you with sufficient data for updating different UIkit elements as properly. 

Right here’s our demo web page as a reminder:

Final however not least, within the documentation, there’s some data on the right way to replace a element through the use of the replace occasion. Maintain this in thoughts in case it’s wanted. 

As all the time, thanks so much for studying!

UIkit Tutorials on Tuts+

UIkit, within the builders’ personal phrases, is a “light-weight and modular front-end framework for creating quick and highly effective internet interfaces”. It’s a very well-liked manner of constructing entrance finish interfaces, so get onboard with these tutorials!