UIkit 3 - A brief Introduction and Comparison with Bootstrap

I recently upgraded my Shareurcodes's template from Bootstrap and Material Design to UiKit 3. In this article, I will share my thoughts about the new open source front-end framework Uikit and why I think it is better than Bootstrap. I also try to share the problems I faced and guide to migrate from Bootstrap to Uikit.

For those who don't hear about Uikit 3, It is an open-source front-end framework just like Bootstrap for developing web interfaces. It is currently on RC Beta as of now I am writing this blog and current version is 3.0.0-Rc.6 (16th June 2018). Since it is a Release candidate there will not be any removal or changes in class names so you can try it without worries. The Uikit is developed by a German designing company YOOtheme, and they are actively using it for making some of their web templates. Actually, their themes are pretty damn good and it is also one of the main reason I choose this framework. You can check out their themes collection by visiting below link https://yootheme.com/themes.

Basically, The UiKit 3 is Bootstrap with some Superpowers.

Installation

If you prefer old quick CDN method then, you can grab it from following links,

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>

Now if you are like me prefer to install it through Webpack, then 

yarn add uikit

Then in your app.js file,

// UIKit
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// loads the Icon plugin
UIkit.use(Icons);

The UIkit comes with its own SVG icon system and a comprehensive library, which comprises a growing number of elegant outline icons. This component injects SVGs into the site so that they adopt colour and can be styled with CSS. If you don't want to use it then you remove Icons from loading and thus reduce some bundle file size.

Now in you app.scss file, add Uikit SCSS like below,

// UIKit
// 1. Your custom variables and variable overwrites.
$global-link-color: #7c4dff;

// 2. Import default variables and available mixins.
@import "~uikit/src/scss/variables-theme";
@import "~uikit/src/scss/mixins-theme";

// 3. Import UIkit.
@import "~uikit/src/scss/uikit-theme";

As you can see you can easily override Uikit's default global variables by your own favourite colours. Here, I override the global default link colour to match my template.

Migrating from Bootstrap

The Uikit and Bootstrap shares almost the same design philosophy. The migration from one to other will not be a difficult task. Basically, for almost all cases you only need to add a uk-* prefix to class names and can use UIkit components by adding uk-* or data-uk-* attributes to your HTML elements without writing a single line of JavaScript.

So let's compare the major differences,

1) Grid System

If you are coming from Bootstrap, then the grid system in Uikit seems to be entirely different and confusing at first. But believe me, It is as easy as Bootstrap's grid system although there are some differences.

Let's compare it with an example,

In Bootstrap,

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column of 1/3 width from medium onways
    </div>
    <div class="col-md-8">
      Column of 2/3 width from medium onways
    </div>
  </div>
</div>

In Bootstrap we use 12 Colum grid system and In Uikit we can achieve the same 12 column grid layout by using  Width component to determine how much space of the container each item will take up, and by combined with the Flex component to align and order grid items.

So In Uikit,

<div class="uk-container">
  <div uk-grid>
    <div class="uk-width-1-3@m">
      Column of 1/3 width from medium onways
    </div>
    <div class="uk-width-2-3@m">
      Column of 2/3 width from medium onways
    </div>
  </div>
</div>

So as you can see that it is very much similar to bootstrap and you can make any layout with any visibility you like with this approach. It is as flexible as Bootstrap. 

Note:   React will work with data-uk-* prefixes only.

Remember: Do not add any HTML tags between two Uikit widths div container as it causes unexpected results. This is because Uikit grid system treats it as another auto width container and fill rest of screen width with it. I made the same mistake for the first time and it took me some time to figure the cause. That is why I share this experience with you guys.

2) Forms 

There are some differences between form classes in Uikit and Bootstrap. Let's compare them.

In Bootstrap,

<form>
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input">
    <label class="form-check-label">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Now let's see the same form using Uikit classes,

<form>
  <fieldset class="uk-fieldset">
    <div class="uk-margin">
      <input type="email" class="uk-input" placeholder="Enter email">
    </div>
    <div class="uk-margin">
      <input type="password" class="uk-input" placeholder="Password">
    </div>
    <div class="uk-margin">
      <label>
        <input class="uk-checkbox" type="checkbox" checked>
        Check me out
      </label>
    </div>
    <button type="submit" class="uk-button uk-button-primary">Submit</button>
  </fieldset>
</form>

The Uikit checkbox looks much much better than one in Bootstrap. Apart from Input and checkbox, UiKit also has classes for select, textarea, radio buttons, range. Visit the following page to explore Uikit Forms.

Note: To get full-width buttons use uk-width-1-1 class along with Uikit button class.

Some Exciting Features I loved

1) Image Lazy Loading Component

The Uikit provide an image lazy loading component by default to Speed up the page loading times and decrease traffic by only loading images as they enter the viewport. The Image components supports the img element and the CSS background-image property.

To apply this component, add the uk-img attribute to an <img> element and add the data-prefix to the src attribute so that it reads data-src.

<img data-src="" width="" height="" alt="" uk-img>

Visit the following page to explore Uikit Image.

2) Animation

The Uikit provides us with a wide range of animation classes which can be used to change the look and feel of your website. It can be used along with the Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.

<div uk-scrollspy="cls:uk-animation-fade"></div>

3) Notification Component

The Uikit has a Bootstrap Notify like component to create toggleable notifications that fade out automatically. This component is easy to use and highly customizable. It can be used to show success messages or alerts etc. 

The syntax is given below.

UIkit.notification({
    message: 'my-message!',
    status: 'primary',
    pos: 'top-right',
    timeout: 5000
});

Visit the following page to explore Uikit Notification Component.

Final Verdict

Although in the beginning, I use Uikit as an experiment now I really like the Uikit framework and really impress with its features. It can really help you to avoid other third-party library dependencies for animations, images lazy loading, sending notifications etc.

If anybody has any suggestions or doubts or need any help comment below and I try will respond to every one of you as early as possible.