UIkit 2.9 – New cover and flex add-ons and other improvements

Long time no see, but UIkit is back with great additions and improvements. First we’d like to say thank you for the over 900 extra stargazers and additional 130 forks on GitHub since the last release in June. It is nice to see growth not only in UIkit’s maturity but also in the community.

We added two new add-ons that we are already quite fond of and you will certainly love, too. Apart from the new additions, UIkit received a lot of attention in refactoring and fixes for existing components and add-ons.

New Cover add-on

The Cover add-on allows you to expand images or videos to cover their entire parent container. You can even use an additional position to place content on top of the image or video.

New Flex add-on

The Flex add-on utilizes the power of Flexbox to vertically and horizontally align objects. More features will come along in the future that will make the Flex add-on an essential tool for building layouts.

Utility component

Combine these two add-ons with the new .uk-height-viewport and uk-position-cover classes from the Utility component, and you can easily create fullscreen teaser images or videos with perfectly aligned overlaying content.

Sticky add-on

The behavior of the sticky add-on was given an overhaul, including support for animations and activation condition depending on screen size. But we also changed the generated markup and usage of classes. So please make sure that everything works as expected after updating to the latest UIkit version.

Refactored JavaScript

We removed the Promise polyfill in favor of jQuery's Deferred Object to keep cross-browser functionality. If you rely on the Promise polyfill shipped with UIkit, please fill the gap with any of the existing shims e.g. ES6 Shim.

In the past UIkit auto initialized and updated JavaScript components every time the DOM changed by utilizing MutationObservers (if browser support was available). This default behavior has been removed. You now have to add the data-uk-observe attribute to elements that you want to be observed. This brings performance gains and reduces unexpected visual flashing in areas you wouldn't expect it. Find more information here.

Tab component

Other great refactoring efforts are an improved responsive functionality of tabs, an easy way to switch between multiple content containers for the switcher component and many additional options for a lot of components including further code cleanup.

We're pretty excited about this release and hope that you will be too. As always we would be glad to hear your feedback and opinions.