What is UIkit (User Interface kit) and what can one do with it? What added value does it offer us web developers? Why not another front-end framework? Questions about questions that need to be answered. I would be happy to clarify them and introduce you to this great piece of software. Let's jump right into it!

Front-End what?

Again terms nobody knows. But don't worry, salvation is near. When dealing with content management systems, a distinction is made between front-end and back-end, whereby the front-end is closer to the user or input and the back-end is closer to the system or processing. Even simpler said: the front-end is what you see on the screen when you are on a website.

All right, that's understood. But what is a framework? Wikipedia describes it pretty well. A framework is a programming framework that is used in this case in a component-based development approach. Thus, the framework itself is not yet a complete program, but provides the framework within which the programmer creates an application. So what is UIkit? Well, now it's almost like simple math, 1 and 1 equals... 2, exactly! UIkit is a toolbox created for displaying web pages. Let's get to know the tools available to us...

May I introduce: UIkit

Camille Peter has already explained in her blog post why and above all for what we use Pimcore. If data from this system is now to be displayed to the user using a web browser, we use suitable components of the UIkit framework for the use case. Always, whether website, web application or complete e-commerce solution! However, this was not always the case. At the beginning we were, like almost everyone else, on the Bootstrap train. Bootstrap is the most popular and widely used front-end framework on the market today. However, as with many things, the biggest is not the best.

UIkit itself is a lightweight and modular front-end framework for developing fast and powerful web user interfaces. In order for a website to perform as well as possible and still provide an excellent user experience, it is important to get as much functionality with as little code as possible. From our point of view, UIkit does this best by far. Due to the extremely well thought-out modularity, many components that are not needed can be deactivated. This saves the user unnecessary "overhead", i.e. additional information that no one is interested in and therefore does not need to be downloaded and processed. The waiting time is shortened, the user experience is enhanced and everyone is happy – even the developers.

Powerful out of the box

One of the reasons we use UIkit is its great compatibility with popular build tools like Webpack. More information about Webpack can be found in Christophe Rapenne's blog post. UIkit uses build scripts to perform various useful tasks, such as compiling the various components. These are stored in separate files and can therefore be implemented in modules.

Many of the different components – currently 81 in number – can be linked together and thus extend their own functionality with that of the others. For example, the "Switcher" component allows switching between contents via mouse click, while the "Tab" component provides the buttons for easy and comprehensible navigation. Or the "Navbar" component represents the naturally intuitive and prominent navigation bar and the "Sticky" component allows you to access it at the top of your browser after scrolling far down. How cool is that? The possibilities are great and offer a solution to almost everything.

Goodbye jQuery

Today, jQuery, a free JavaScript library that provides functions for DOM navigation and manipulation, is used on every second and on 70% of the 10,000 most visited websites. Initially included, the dependency on jQuery has now been removed from UIkit's code base. Of course jQuery can be used in combination with UIkit. However, we only write pure JavaScript, also known as VanillaJS. ;-) Admittedly, you lose some shortcuts that were possible with jQuery, but UIkit has already provided for this. Not only do you save on code, you also have many of the most common jQuery functions on board.

jQuery

$('.my-element').on('click', () => {
    $(this).addClass('active');
});

UIkit

const { $, addClass, on } = UIkit.util;
const element = $('.my-element');

on(element, 'click', () => {
    addClass(element, ‘active’);
});

The principle is pretty much the same and makes it relatively easy to extend the missing functionality, even without jQuery!

Icons in own matter

Yes, an system for icons is also included in this framework. While other front-end frameworks suggest the use of other icon sets and have to load even more code – as if jQuery wasn't enough – UIkit itself has a small but fine icon system integrated. At the moment there are 133 icons (constantly extended) available as standard. Not much in comparison with Font Awesomes 1264 freely available piece. However, there is also a build script which has the task of adding further icons to this set. Thus, project-specific icons can be included in the website at any time. The beauty of the UIkit icons is their flexibility. No matter if you want to change the size and color or convert the icon into a button, the implementation is child's play and makes fun!

Speed makes the difference

As already mentioned in UIkit's guiding principle, great importance is given to the loading and processing speed of the code. Nobody has time to wait these days. The world is fast moving and people are impatient. In addition, not everyone carries a high-end smartphone with a high-performance processor and the network speed is not the same everywhere. Therefore, it is crucial whether a website performs well and offers a good user experience. UIkit comes with some tools to help us developers do this. Recently the "Image" component was integrated into UIkit, which allows lazy loading for images. This means that the images are only loaded on request when they enter the viewport of a screen. The images will be reloaded continuously as you scroll down. This behavior accelerates initial page load times and reduces data traffic.

Other computation-intensive components like the slideshow or the parallax are all accelerated by hardware and are not animated via JavaScript. The visual experience is great and makes a Bootstrap Carousel look really old!

Bonus

Furthermore, UIkit offers even more little treats that make the everyday life of a web developer easier. Scope conflicts or problems with multiple versions on the same page can easily be avoided with the Scope mode and custom prefixes. In addition, an RTL version is offered as standard and migration from an older UIkit version is also easily possible using a browser extension.

My Summary

In summary, UIkit is a complete set of tools for small, large and complex websites that is easy to use. The components work very well together and allow you to create powerful and fast user interfaces for a great user experience.

Little or no extensions are required, as everything is customizable. Additional software libraries are usually superfluous, since UIkit offers an extremely high level of functionality. So it is quite possible to create a website with really little code.

Take a look at some of the UIkit kitchen sink pages of this framework today. It's worth it!