Happy New Year, everyone! Let's start 2018 with UIKit Beta 36 and its highlight – the new Slider component. Other great features in this release include improvements of the uk-video attribute, more accessibility and some neat extras.
The new Slider allows you to do everything that was possible with its predecessor from UIkit 2. It's fully customizable, responsive, and supports swipe and touch navigation as well as mouse drag. Other Slider features include center mode and infinite scrolling. When clicking through the items, the Slider keeps up with your pace, so that no click or swipe is lost. Meanwhile, hardware accelerated animations ensure smooth transitions. You can apply the Grid component to add gutter and use different classes from the Width component to define the size of all items and build the Slider you want. If no width classes are used, each item's width depends on the dimensions of the content itself. Of course, you can also create a Slider that extends to full viewport height. Both the Slideshow and the Slider are able to generate their dotnavs automatically when there is no item specific content in the navigation items. The dotnav of the Slider even recalculates the number of hidden items depending on the Slider's width. By the way, the Slider and the Slideshow now also have RTL support, so both adapt perfectly to websites using right-to-left languages.
Scrolling through sets
The new Slider combines the functionality of the Slider and the Slideset that you know from UIkit 2. You can now choose if you want to loop through single items or sets of visible items. The number of dots in the navigation will also adapt automatically depending on how many items are visible on the specific viewport. The Slider now offers the Slideset functionality, the only difference is that the Slideset offers different animations. For this reason, we have decided not to implement a Slideset component into the UIkit 3 stable release. This puts into question whether a new Slideset is even necessary. What do you think?
Apart from the Slider, the uk-video attribute was improved as well. Now videos play and pause when they enter or leave the viewport. Since it's recommended to use videos instead of animated gifs due to their smaller file size, we can now deprecate the uk-gif attribute, which does the same as the video attribute but for gifs.
The accessibility of UIkit has been greatly improved. The Transition and Accordion components as well as the show on hover functionality from the utility component are now accessible through the keyboard.
There is one tiny breaking change in this release: To make it
keyboard-accessible, the accordion title now uses
<a> elements instead of headings. See the
In the new release we have removed support for iOS and
IE10 and also most
-moz vendor prefixes. This results in a smaller
UIkit CSS file size.
This is an huge UIkit release with many improvements under the hood. For the full list check out the changelog. We are now on the homestretch for the final UIkit 3 Stable release. Masonry Grid and Priority Nav are next, which will complete UIkit 3. We hope you'll enjoy working with our new Slider! Stay tuned and give us your feedback in the comments section.