UIkit 3.24 – Overflow Fade and Lazy and On Click Loading Videos

Today, we are happy to introduce UIkit 3.24. It comes with a new Overflow Fade component to create smooth navigations with horizontal scrolling, lazy and on click loading videos as well as other smaller improvements across various UI components. This and more coming up.

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

Overflow Fade Component

Long horizontal navigations, such as Subnavs or Tabs, often wrap onto a new line on smaller screens, which looks messy, especially for tabs. That's where UIkit's new Overflow Fade component comes in. Simply add uk-overflow-fade attribute to a container element to enable horizontal or vertical scrolling whenever the elements content is wider or higher than the container itself. Items that extend beyond the container are subtly faded out and can be scrolled horizontally or vertically. It's especially smooth on touch devices, where you can easily swipe through the menu items.

Video Component

We refined the Video component so it's now perfect to display videos as animated images. Videos with the uk-video attribute automatically pause when they are hidden, for example inside a slideshow, and resume playing from the same position once visible again. To apply the same behavior when the video leaves and reenters the viewport, simply set the autoplay: inline option. To toggle the video playback on hover, set the autoplay: hover option. Optionally, define a container element, like a card, to toggle the autoplay, using the hover-target:SELECTOR option. You can also restart the video from the very beginning after pausing it, by adding the restart option.

Load all videos on your site lazy as they enter the viewport by using the native preload="none" attribute. UIkit automatically removes the attribute once the video enters the viewport, ensuring it loads lazily.

Now you have everything you need to use videos like animated images across your site.

But that's not all. Videos can also be loaded on click. This is especially useful for standard videos with controls. Simply display a placeholder image and replace it with the video using UIkit's Toggle component. The Video component removes the preload="none" attribute when the placeholder image is clicked to load the video.

This also works for embedded iframe videos from YouTube or Vimeo. Here, no external requests will be sent to their servers, and no JavaScript will be loaded until the placeholder image is clicked, which is great for privacy and GDPR.

Mind that we deprecated the old automute option in the Video and Cover components. Simply use the muted attribute for videos or mute=1 for YouTube and muted=1 for Vimeo in the URL instead.

Icon Component

The Icon component has a new icon overlay style to make the icon look great on background images or videos. This is perfect for videos which are loaded on click. Simply position the icon overlay above the placeholder image to add a nice play icon with a hover effect.

Card Component

The Card component has also a new card overlay style which is specifically designed to look great on background images or videos.

Countdown Component

We refactored the Countdown component. Instead of styling it individually with Less variables, use the style classes from the Text and Heading components to style the countdown and its labels in the markup. This makes displaying the countdown in different sizes much more flexible.

Form Component

The size modifiers in Form component now also apply for radio buttons and checkboxes. So now they are available in small and large size too.

Further Improvements

Of course, UIkit 3.24 comes with other smaller improvements and fixes. We added new z-index classes to the Position component. We added new size modifiers for the top and bottom paddings to Section component. Finally, the Navbar now automatically expands its height to fit larger content, for example, a bigger logo. For the full list of features and fixes, check out the changelog.

Migration to UIkit 3.24

There are breaking changes for the refactored Countdown component, so please take a look at the migration guide.

What's Next

UIkit 3.24 introduces smooth horizontal scrolling for overflowing navigations, flexible autoplay options to use videos as animated images including loading them lazily or on-click, and many other great improvements. Now it is your turn to share your feedback, so let us know what you think about this release in the comments below.