UIKit: First Impressions and General Overview

Front-end frameworks seem to be a dime a dozen, while old and seldom use phrases are very plentiful, common, and therefore inexpensive.  Bootstrap is still the most popular framework for web developers when constructing websites, and for good reasons:  There’s a large and active community, it is rather simple to work with, and it contains a plethora of toys right out of the box.

So why would you look else where for a framework?  Well, several reasons actually.  Perhaps Bootstrap doesn’t have/do that niche animation you’re looking for.  Maybe Bootstrap is just too big for your site with all its many features.  Or maybe, as in my case, you’ve been given a work assignment to develop a site, and the starter theme is bundled with a different framework.

Enter UIKit and starting blocks

UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.  It is an open source project developed by YOOtheme with around 7 dedicated developers and dozens of contributors.  Like most frameworks, installation can be done by downloading and setting up the asset files, installing via npm or yarn, or pointing to a hosted CDN.  Once installed on your page you’re good to go.

As with any new framework, the first thing I reach for is their grid system.  Compared to Bootstrap, UIKit does the grid system a little differently.  Rather than using a class to set which element would be the container, UIKit recommends using the uk-grid attribute.  In doing so, it injects the uk-grid class via javascript.  You can add the uk-grid class instead of attribute too, the end results are still the same.

This is fine.  Setting up the container requires one little piece of code, which is pretty standard across frameworks.  Where things got tricky was when I tried setting up the column system.

8 1/2 hurdles

Some frameworks call them columns, others call them cells, UIKit calls them width.  While some frameworks have a number of columns or cells you can have total in a row, UIKit uses fractions.  I’m not a huge fan of this method.  Rather than using addition to build up your grid, you’re forced to calculate with fractions.  For me, this make it more cumbersome than it needs to be.

A unique thing about UIKit and width though, is its ability to inject child classes.  Say you have a grid system where every child is the same size, you can simply apply a width-child class to the grid element.  Doing this will apply the same class size to all the children.  This can greatly speed up your development process and reduce coding.  You do need to provide an empty div or some kind of container element, otherwise you’ll be applying the width-child class directly to your content.

Running with the wind

What makes UIKit really shine from frameworks like Bootstrap is its smorgasbord of components that are easy to apply and work quite well out of the box.  I’ve used the Accordion, Filter, Lightbox, Slider, and Slideshow, as well as applying Animation and Parallax features to page items.  All this can be added by giving elements specific attributes or classes.  That’s it!  Unless you’re looking at doing something for specific or customize, there’s very little javascript required on your part.

The documentation on their website contains a quick rundown of the basic requirements, descriptions of the classes, a simple example, and several other previews and markups for more complex use.  The simple and clean site design makes reading the instructions and markup easy, and viewing the demo very clear and unobtrusive.  The functionality works very well across the latest browsers and devices, and customizing the specs is as simple as adding a key and value to the core attribute.

Final Thoughts on UIKit

It really is the amount and ease of use of their component items that makes UIKit a framework monster.  You’ll able to create web pages with a spectacular user experience quickly and easily.  However, despite the condensed name, UIKit isn’t very small.  It’s more than twice the size of Foundation’s framework, and while roughly half the size of everything Bootstrap can provide, UIKit doesn’t have the option to pick and choose which components you wish to bundle.

The size of your project and the features it requires would have to be large enough to justify the necessity of UIKit and all its bells and whistles.  It has just about anything you could want to enhance a website, with a relatively ease of use.  Despite my reservations about the grid system, once you understand its process it becomes easy to work with.

If you’re new to the world of UIKit, quickly browse through the documentation to see what it can do.  View some of the demos, play around with the markup on a site like CodePen, and see what it can do for you.  For large, feature rich website, UIKit comes highly recommended.

Leave a Reply

Your email address will not be published. Required fields are marked *