Why UIKit is better than Twitter Bootstrap

Why UIKit is better than Twitter Bootstrap

The trend on Twitter Bootstrap is huge: many of premium and popular template and extension developers are implementing this framework into their own products and Bootstrap has become a part of Joomla platform by default. But the situation has come to Mootools mind in Joomla 1.5 which was supported as a part of core features despite of the fact that jQuery was much more popular. Talking about front-end frameworks we may admit that it is always good to use an alternative solution if it is better that a default one. And now we have such a solution that has been designed to change Twiiter Bootstrap.

UIKit - a brand new front-end framework

Well, let me introduce UIkit - it is a modular and lightweight front-end framework for developing fast and powerful web interfaces which gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable. UIKit is a new revolutionary framework that took the light in July of 2013 as a result of solutions of YOOTheme - popular theme provider and was tested on lots of their templates.

Official page: getuikit.com

Initially the main goal of UIKit was to create a modern, fast and modular framework which would make some restrictions of using IE9+ from on the one hand, but would allow to throw our loads of hacks (as in alternative solutions) on the other hand and make code clean and light-weight. The dev team could reach basic aims.

So, the framework is based on LESS and add-ons. UIKit core is ultimately separated from template styles. Useful variables let us maintain styles and design them for current needs. There is a suitable Customizer providing quick and easy style configuration without necessity to change LESS files manually. Here is more information.

Modularity and size

Minimal size start from 55 Kb (js – 33Kb / css – 22Kb / without gzip and minifying).

The framework comes with rich and interesting component sets, but that requires the increasing of the whole size (100Kb is full size of js files), modular structure allows to getting satisfied with all necessary features even with serious size reducing.

Comparison with other frameworks:

Framework is really light-weight. Take a look at the diagrams:

UIKit comparision - CSS without icons

CSS without icons.


UIKit comparision - CSS with icons

CSS with icons.


UIKit comparision - JS weight

JavaScript


UIKit comparision - CSS and JS

Full package (CSS and JS).


Fonts

Bootstrap has had an ability to use glyphs, but UIKit goes forward and makes high-quality implementation Awesome font.
More glyphs - more customization features. Google Fonts are supported by default.

Responsive design

Since the framework was created with an eye on modern trends there have been Responsive design and grid sets - the underlying trend, so they have been released in UIkit as its core features. Such technologies aren’t surprising nowadays, but these features are made on a really high level.

Naming

Any new framework performs de facto the role of pursuer (of the Bootstrap) and it’s normal practice to use non-conflicting namings with which YOOtheme dev team coped well. Namings are easy, unique and do not conflict with other classes.

Components / Add-ons

Another nice features of the framework is a flexible component combining without making a ‘bicycle”.

Let’s have a look at the drop-down list as an example. There are two independent components - Button and Dropdown. We may easily unite these components if it’s necessary to get a group of buttons with personal drop-down lists. And so on: buttons + tabs / input + icons or even 3-4 components: button + drop-down + subnav + grid + search = it’s easy and with no conflicts.

Unique and interesting UIKit components:

Off-canvas
it’s very suitable for mobile devices.

Switcher
buttons variation with active state trigger added by default.

Navigations
here is series of component to make navigation user friendly.

Form file / Form password / Upload
forms enhancing.

Placeholder

Search
search field with a ready feature to display Ajax results.

Sortable
base UI for managing the elements order (good for back-end). JQueryUI is no needed.

Timepicker/ Datepicker
base calendar / date chooser UI — JQueryUI is no needed.

Autocomplete
it’s clear

Markdown area
a preview to work with CodeMirror

Styles and themes

Everything is fine as it has been described below.

Documentation

Fine, well-prepared documentation allows newbies to understand quickly the principle of work. Serious moments can be found via Github or direct question to dev team.

Conclusion

As we can see, UIKit is a great alternative for Twitter Bootstrap that really has less weight and provides lot of useful tools for webmaster that makes a site look great with small requirements. UIKit overtops Bootstrap according to all the characteristics and more and more extensions have been supporting this great framework. NorrTheme templates have full UIKIt support and we specially projecting themes that meet UIKit requirements.

We love to implement new great technologies and UIKit is worth of that.

This article originally was written by konstantin_fl in Russian language. I provided English translation and creativily edited the article. See original article
Google+
LinkedIn
Pinterest

Eugene Sivokon

About author

Eugene has been a part of and worked in many of the web development roles over the years, taking on various projects. At the present moment, he is involved as a team manager working inside his personal projects. This blog is specifically dedicated to start-up businesses, team management, and how to maximize your success with Open Source ideology.

Norrnext - extensions for Joomla and Pagekit

RoundTheme - Professional Kunena templates

NorrTheme - templates for Joomla and Wordpress