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

UIkit 3 Beta 23 released

New Parallax, Grid Parallax, Form Range and Marker components

May
18
UIkit 3 Beta 23 released

UIkit is the work horse behind pretty much all of our products. It's the open source front-end framework we build and use ourselves to create the YOOtheme Pro Builder and all of our themes. Consequently, we are working on improving UIkit. Today we are happy to release the UIkit 3 Beta 23 which is packed with new components and features.

Parallax

Parallax scrolling is a popular technique in web design to add dynamic effects to a page during scrolling. Now, it is available in UIkit 3. The super flexible Parallax component allows you to animate almost every CSS attribute based on the scroll position on your site. Used in the right way it gives your website a subtle 3D effect, creates the illusion of depth and allows to highlight certain elements. Check out the examples and make sure to show us what you've created with this flexible component.

Parallax component

Grid Parallax

You can easily bring the parallax effect to your grids using the Grid Parallax component. It simplifies the options you need to use and allows to animate several properties to create grids that are something special. See it in action here.

Grid Parallax component

Form Range

The Form component now also styles input elements with the range type. It allows you to drag a handle to select a specific value from a range of numbers.

Form range component

Marker component

With the Marker component you are able to create a marker icon that can be displayed on top of images. A great use case are popovers on visual elements. How about you add some interactive labels to your photos? Use the existing Position component to place the markers wherever you want.

Marker component

More additions

As always, the release comes with many more features, fixes and changes. We've added a new class for xlarge paddings and new visibility classes to hide elements on touch or no-touch devices and much more.

We'd like to know what you think about the release. Please leave your feedback in the comments and join us in the UIkit Gitter chat.

By Sascha | | Posted in UIkit

Comments (7)

  • david.dahl

    david.dahl

    | Profile |
    Looking froward to using the parallax and marker options. Thanks.
  • david.dahl

    david.dahl

    | Profile |
    The Marker component doesn't seem to working on Chrome or Edge in the above example or at https://getuikit.com/docs/marker
  • lucas

    lucas

    | Profile |
    as always AMAZING!!!
  • getyoowoo

    getyoowoo

    | Profile |
    When will these great features be implemented in YooTheme Pro?
  • chris.gilroy

    chris.gilroy

    | Profile |
    Is this not incorporated into the themes yet because its beta??

    I've been trying and failing to use the new parallax stuff for the last hour...Im just now realizing it may not be included in the latest yootheme pro update
    • florian

      florian

      | Profile |
      The new UIkit features will be part of future Pro releases. The way we implement features is UIkit -> Pro -> Theme release.

Leave a comment

Please login to leave a comment.