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

UIkit 3 Beta 31 released

Goodbye jQuery, Hello Slideshow!

Oct
20
UIkit 3 Beta 31 released

Today is a special day for us. We've worked very hard and are happy to introduce some big improvements with UIkit 3 Beta 31! Finally, the new Slideshow component that you've all been waiting for is here. We think it is truly amazing! But that's not all. We also got rid of jQuery. Yes, you've heard right, UIkit is now a lot slicker :-) And there is more we would like to highlight in this post.

Slideshow

The new Slideshow component was written from scratch. It's now much lighter and flexible and has everything you expect from a modern slideshow. It's fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. When swiping between slides, you can control animation with your fingertips or mouse cursor. It even accelerates to keep up with your pace. This way, no click or swipe goes wasted. Despite all these new features, the slideshow even got 25% smaller (gzipped). Let's take a look at what's new.

Content Parallax

This is the most exciting feature of the new slideshow. Any content inside the slides can be animated together with the in and out animation of the slideshow. This functionality is inherited from the Parallax component, and it allows you to animate CSS properties depending on the scroll position of the slideshow. You can now create beautiful parallax effects with the content sliding in and out. When swiping through the slides, the parallax animation literally clings on to your fingertips.

Animations

The slideshow animations underwent some changes. We dropped the outdated, so called "advanced image transitions" from UIkit 2 in favor of the new, modern parallax and scroll effects. Thus, besides the classic Slide, Fade and Scale animations, there are also Pull and Push. The first one resembles pulling an image from a collection of slides by uncovering the image below with a smooth parallax effect. The second one does the opposite by pushing an image on the deck. All animations are hardware accelerated for a smoother performance.

Videos

You can create video slideshows by using the video element or iframe videos from YouTube. When scrolling through the slides, the videos are muted and start playing automatically. They will also autopause when you move to the next slide and start playing again where you left off when you swipe back.

Responsiveness

Image and video slideshows are fully responsive. They always take up the full width of their parent container while the height adapts according to the defined ratio. You can also set a minimum height for small devices and a maximum height for large ones.

Goodbye jQuery

UIkit 3 Beta 31 also removes the jQuery dependency, which means that UIkit works on its own, and you no longer need to load the JavaScript library. Now your website works faster since jQuery is huge. This was quite a big JavaScript alteration, and we hope everything still works as expected. If you notice any new JavaScript bugs, please report them in the Github issues.

More Improvements

We've added an autoplay option to the Lightbox component, and videos can now benefit from a poster image using data-poster attribute. Also, YouTube and Vimeo videos play in full screen mode, which was not possible before.

While we worked on the Slideshow parallax, we got some new ideas for the Parallax component as well. Now, instead of only one start and end value, you can set unlimited values, and the animation will evenly go through them.

As always, the release comes with many more features, fixes and changes. For example, you can style checkboxes and radio buttons in Firefox. For the full list together with all the bug fixes check out the changelog.

What's Next?

Now the Slider, the Slideset and the Dynamic Grid are the only three components which stand between us and the stable version of UIkit 3. We are sure that you will love our new release! Leave your feedback in the comments section and let us know what you would like to see in future.

By Sascha | | Posted in UIkit

Comments (25)

  • carl.gerhard.wieners

    carl.gerhard.wieners

    | Profile |
    Built in Pro pretty soon ? :-)
  • houston.digital

    houston.digital

    | Profile |
    Marry me ♥

    I love the performance improvements. Too bad we won't have a new theme next month to see everything with this. Any ETA on the contact form? :D
  • akcreation

    akcreation

    | Profile |
    fantastic work guys, this looks truly awesome - thank you
  • philippe.gros.meyer

    philippe.gros.meyer

    | Profile |
    Bravo very cool
  • hubert.cole

    hubert.cole

    | Profile |
    We are definitely moving in the right direction! This will make it easier than ever before. Thanks Sascha
  • bruno.bernardi

    bruno.bernardi

    | Profile |
    Love this!!! Can't wait to try it out
  • xspline

    xspline

    | Profile |
    YEEEESSSS!!!!
  • maggus86

    maggus86

    | Profile |
    Thank you for all the great new features! Can't wait to see the power of these features inside YOOtheme Pro Themes =)
  • roberto.coria.2

    roberto.coria.2

    | Profile |
    Realy great News!
    I have a realy Important Wish for the UIkit website.
    Please add a Search for all the function. Sometime we search some Class and need to check all categories to find it.

    Thank you!
  • benoit.gibelot.14

    benoit.gibelot.14

    | Profile |
    Nice !!!
  • aleksey.kurylev

    aleksey.kurylev

    | Profile |
    Cool! Thank you, I love you!
  • oguz.copel

    oguz.copel

    | Profile |
    Love this (UIKit). Can't wait for YPRO 2 and UIKit 4 :) Hopely the implementation of the Slideshow in Pro will be soon.
    • sven.grossenbacher

      sven.grossenbacher

      | Profile |
      Uikit3 release you mean ;-)
  • softforge

    softforge

    | Profile |
    Well done.
    We have complained when things have not been right but its also important to say thanks when it goes right and these improvements are appreciated.
    Thanks
  • nedzad.gruhonjic

    nedzad.gruhonjic

    | Profile |
    so great everytime to read the news what you have done so far. Everyday like more and more to use YooTheme Pro. Thanks for great work guys.
  • arthur.rosa

    arthur.rosa

    | Profile |
    This is HUGE! Can't wait to use it in my website.
    I love YOO guys.

    Best wishes from Brazil.
  • christopher.aoun

    christopher.aoun

    | Profile |
    My gosh that slideshow moves fast with the mouse, so responsive , feels mobile app like. excellent work. cant wait for the full release
  • micha.welter.42

    micha.welter.42

    | Profile |
    nice, i have been waiting for that slideshow for so long :) Hope it will be available in Yootheme Pro soon
  • andreas.kanellis

    andreas.kanellis

    | Profile |
    Thank you very much
  • moloseb

    moloseb

    | Profile |
    Congrats for best theme provider award!
  • bogdan.sarpe

    bogdan.sarpe

    | Profile |
    Today is Tuesday. Any news about 1.10?
  • vladimir.eliseev

    vladimir.eliseev

    | Profile |
    We wait about news of 1.10
    • akcreation

      akcreation

      | Profile |
      looks like there's been a few bugs that needed squashing on the slideshow component (3 uikit beta version updates in the last 10 days or so), so am guessing they are making sure everything is sorted with the slideshow component before releasing YP 1.10
      • vladimir.eliseev

        vladimir.eliseev

        | Profile |
        I understand that thing but we only need their answer.... But they keep silence....
        • hanna

          hanna

          | Profile |
          Hi, Vladimir. It's released now. Sorry, we had to make sure that everything works. But now it is ready for download :)

Leave a comment

Please login to leave a comment.