UIkit 3 Beta Roundup – Sass version, RTL support and more
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 of the additions and changes from the last few releases.
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.
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.
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.
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
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.
<body> <!-- Page content --> ... <!-- Toggle --> <button uk-toggle="target: #my-id" type="button"></button> <!-- Off-canvas element --> <div id="my-id" uk-offcanvas>...</div> </body>
<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>
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.