UIkit 3 Beta Roundup – Sass version, RTL support and more

Sascha
April 12, 2017
UIkit

Since the launch of the first UIkit 3.0 beta version quite a lot of things have happened. We weren’t idle and worked like busy tech-bees on our modular front-end framework to improve its functionality. Yesterday, we just released the 21st beta version. We want to take this opportunity to highlight some additions and changes from the last few releases.

Sass version

Many of you have requested it: UIkit 3 is now also available as a Sass version. It allows the integration of UIkit in Sass-based projects. Check out our documentation on how to create your own theme and compile Sass into CSS.

Right-to-left support

UIkit now supports right-to-left languages such as Arabic or Hebrew. The RTL version switches the orientation of all UIkit design elements. This enables you to create websites for even larger audiences all around the globe. Learn how to use the RTL version in our documentation.

Avoiding conflicts

In some cases, you may need to use several versions of UIkit on the same page or make sure that the UIkit styles only apply to a certain section on your page but don’t interfere with any other CSS. Most notably, this might be the case when you use UIkit in the admin area of a CMS or when you create plugins for environments where you cannot control if other versions of UIkit are loaded. You can now use a custom prefix and the scope mode to make UIkit work in any environment. Check out our docs to learn how to avoid conflicts.

Custom icons

UIkit comes with its own icon library of beautiful hand-crafted SVG icons. You can now extend and customize this icon library with your own icon files. Read the docs on how to add custom icons.

Collected UIkit resources

Cannot find that editor plugin or UIkit example someone posted a while ago? No more! We have started creating a list of resources and tools related to UIkit. Check out awesome-uikit on GitHub. You've built something that would fit well in this list? Open an issue, send a pull request or just tweet us the link.

Reactive components, Vue.js and Webpack

We have been working on making UIkit 3 work even better with reactive JavaScript frameworks such as Vue.js and the likes. Some components still need some changes to make them work smoothly, but most of UIkit just works. You can also include the JavaScript components in your own build process. We have described how to use Webpack in the documentation.

Off-canvas reworked

To create mobile-ready and easy to use navigations, the Off-canvas component has always been the go-to solution. In our new release, we have worked on the component’s animation performance and made sure that scrolling on mobile devices matches the device’s native scrolling behavior. Please note that the required markup has changed. To update your website, make sure to wrap the whole page in a container with the .uk-offcanvas-content class.

Before:

<body>

    <!-- Page content -->
    ...

    <!-- Toggle -->
    <button uk-toggle="target: #my-id" type="button"></button>

    <!-- Off-canvas element -->
    <div id="my-id" uk-offcanvas>...</div>

</body>

After:

<body>
    <div class="uk-offcanvas-content">

        <!-- Page content -->
        ...

        <!-- Toggle -->
        <button uk-toggle="target: #my-id" type="button"></button>

        <!-- Off-canvas element -->
        <div id="my-id" uk-offcanvas>...</div>

    </div>
</body>

What else?

Make sure to check out the new Tile component which makes it possible to create layout boxes with different backgrounds that can be arranged seamlessly next to each other. Apart from the highlights in this post, there have been many more additions, changes and fixes. You can find the complete list in the changelog. If you have any question or issues about UIkit and the latest features, upgrades or changes get in touch and join our Gitter chat.