YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

UIkit 3 Beta 36 released

New Slider component, accessibility and much more

Jan
11
UIkit 3 Beta 36 released

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.

Slider

The new Slider component allows you to display multiple content items at once. You can slide through the row of items, smoothly revealing new ones. The Slider was written from scratch, sharing its code base with the Slideshow component. Thanks to this modularity the UIkit JavaScript only got 2KB bigger (gzipped) in file size including the Slider component and all other improvements. We think that's really great! And remember, all this works without jQuery dependency! :-)

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?

Video Component

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.

Accessibility

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.

Breaking Change

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 Accordion documentation.

Removed Support

In the new release we have removed support for iOS < 9.1 and IE10 and also most -webkit and -moz vendor prefixes. This results in a smaller UIkit CSS file size.

What's Next?

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.

By Sascha | | Posted in UIkit

Comments (33)

  • morgan.gustafsson

    morgan.gustafsson

    | Profile |
    Nice! Love it and looking forward to both Masonry Grid and Priority Nav, great additions!
  • aleksey.kurylev

    aleksey.kurylev

    | Profile |
    Cool! You are the best!
  • cappu

    cappu

    | Profile |
    Was looking forward to a Slider component. Thank YOO! :-)
  • carl.gerhard.wieners

    carl.gerhard.wieners

    | Profile |
    Can You please add a wider variety of icons to uikit ?. The ones available are simply not enough. I don't want to have to build in another iconset if I don't have to.
  • pedrojsicilia

    pedrojsicilia

    | Profile |
    Great! Next component Datepicker, please. I need it for booking forms.
  • vladimir.eliseev

    vladimir.eliseev

    | Profile |
    I think that new slideset component don't needed. There is enough functionality of new slider component.
    Thank you for work!
    Waiting for the stable version (not beta)!
  • nickdring

    nickdring

    | Profile |
    Wonderful, I love UIKIT and Yootheme Pro but what about some Pagekit love? Its long overdue.
  • yusuf

    yusuf

    | Profile |
    nice great wonderful +1
    big thanks yootheme!
  • lucas

    lucas

    | Profile |
    Because that I love Yootheme ;)
  • eventoteam

    eventoteam

    | Profile |
    nice, but.. thought the contact form has the highest priority?!
    • houston.digital

      houston.digital

      | Profile |
      The contact form was in active development in november I think and then then removed it to high priority. If their roadmap is accurate, we will find a new theme in february with just a (pretty good) slider and a YooPRO documentation revisited. :(
      • david.dahl

        david.dahl

        | Profile |
        I'm not sure (is anybody) what is going on at YooTheme. They are obviously improving UIKit (which is good) and yet items, as you mentioned, on the road map are being pushed back yet again.

        Zoo (and PageKit) have been all but abandoned and I am losing hope that they will ever really be improved.

        I like YooTheme's work but lack of communication is really hurting their reputation.
        • sascha

          sascha

          | Profile |
          To communicate what we are working on, there is a "What's next" paragraph in all our blog posts (like in this one and also every YOOtheme Pro post too) And YOOtheme Pro has also a roadmap.

          There is still work to do but once UIkit and YOOtheme Pro are feature complete, we will bring ZOO and Widgetkit to the UIkit3/Pro ecosystem. We have already outlined their features but it's too early for sharing.

          We know, waiting is hard but please keep in mind: Good things take time.
        • projektoliver

          projektoliver

          | Profile |
          That´s the problem, they never bring something to the end. Everytime when you think it´s stable and now you can bring it to high quality product, the stop it and make a new thing. I Think the same will happend with yoopro next year...
          • sven.grossenbacher

            sven.grossenbacher

            | Profile |
            Sorry but they always bring everything to the end imho....and it is stable - just adding up things - which sometimes take a while - but they are stable...
          • projektoliver

            projektoliver

            | Profile |
            When you work with Zoo or Pagekit you´re lost and decided to go back to the root of Joomla for Yoothemepro to have modern features.
          • sven.grossenbacher

            sven.grossenbacher

            | Profile |
            I guess if you work with Zoo then yes it can be annoying - and pagekit would be awesome if it had the option to make multi lingual sites...
      • sascha

        sascha

        | Profile |
        Yes, the contact form was downgraded because we met difficulties whether it should be part of YOOtheme Pro or another extension like ZOO. So we paused the development of it.
    • sascha

      sascha

      | Profile |
      Yes, the contact form has high priority for YOOtheme Pro but this blog post is about UIkit.

      Releasing a stable UIkit version has an even higher priority.
  • andreas.kanellis

    andreas.kanellis

    | Profile |
    Congratulations to the team
  • ronald.wegert

    ronald.wegert

    | Profile |
    When its time to implement this feature into the pro template?

Leave a comment

Please login to leave a comment.