UIkit: a Framework for Developing Fast Layouts

For example, Bootstrap and Foundation are such popular cases. But, at the same time, there are others not so popular that can save us a great amount of development time. With this in mind, let’s meet UIkit and discuss a few of its amazing features.

What is UIkit

Here’s its exact definition as taken from its site:

A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Uikit doesn’t require jQuery. You can include it in your projects by following any of the methods described on the installation page.

Let’s now highlight some of its key features/components.

SASS Modifications

If you’re familiar with working with CSS preprocessors and package managers, you can override UIkit’s default styling based on your theme’s needs.

That being said, here are the default UIkit’s breakpoints as declared in the respective SCSS file:

If you need different breakpoints in your theme, all you have to do is to define the same variables in your target SCSS file, like this:

Carousels

Thanks to the Slideshow and Slider components, you can build attractive carousels that work well on different screens and devices.

Whether you want a full-screen carousel, a carousel with not only image slides but also video slides, or some parallax effects to give life to your slides, UIkit has you covered. Just check the documentation and start building!

Sticky Elements

How many times have you wanted to stick an element or even multiple elements at different times as you scroll? To accomplish this, you might have used third-party JavaScript libraries like ScrollMagic.js.

UIkit provides the Sticky component for handling this type of behavior. In its simplest form, you can make a sticky element by appending the `uk-sticky` attribute to it.

Equal Heights

One of the most common requirements when building grid layouts is for certain elements to have equal heights.

For instance, consider the following layout:

Here the blue titles have different heights. What we would like instead is a result like this:

Thanks to UIkit we can achieve this layout by just adding the `uk-height-match` attribute to a container element with a proper value that targets the elements that should match. Alternatively, we should use custom JavaScript or a third-party library like matchHeight.js. Also, in this particular case, a CSS-only approach could work by heavily taking advantage of flexbox.

Lightbox

Another common request for UI developers is the creation of responsive lightboxes. You might have heard of popular JavaScript lightbox plugins like Magnific Popup and Fancybox.

UIkit provides the super useful Lightbox component for creating lightbox galleries by following a simple structure. Worth checking it out!

Scrolling Animations

Without a doubt, scrolling animations remain a popular UX trend. So many sites are using scrolling effects out there. For sure, you should have visited sites where cards smoothly appear or elements are being repositioned as they enter the viewport.

Apart from the popular JavaScript scrolling libraries (e.g. ScrollTrigger) that you might be already familiar with, UIkit allows us to easily include scroll-based animations thanks to its Scrollspy component. All the available animations are listed on the Animation component.

Wrapping Up

These are just a few reasons why, we as Double Dot, love UIkit and use it as a starting point for every project we’re building. At some point, hopefully, soon enough, its new version will be launched. We’re waiting for it and the new exciting features that will bring!

So, what do you think? Will you give this framework a try?