A Web Mechanics Review: UIkit

6 Minute Read

Summary (tl;dr)

UIkit is a free, open-source framework built by the folks at Yootheme. It makes use of more complicated scripts and sources like LESS, jQuery, and FontAwesome and compiles it all in an easy-to-learn HTML/CSS framework. This fully responsive framework creates coding shortcuts to more complex web features like slideshow, slidesets, web stickies, smooth-scrolling. It's relatively easy to deploy onto a site and can save a web developer hours.

A Web Mechanics Review: UIKit

Creating a website can be an arduous task sometimes. When time = money, shortcuts can can end up saving you both. Coding frameworks have been around for a while now and have helped speed up the process of HTML/CSS coding. Frameworks like Bootstrap and UIkit can be found throughout the web in many of your favorite websites.

What Does It Do?

As far as your code HTML/CSS functions, perhaps the question is really "What Doesn't It Do?" UIkit contains many different categories of code presets like:

  • Buttons
  • Grids
  • Flex
  • Navbars
  • Forms

For example, within the buttons code category, there different css classes to adjust button size.

You can use the .uk-button-mini, .uk-button-small or .uk-button-large class to a button to make it smaller or larger.

The Fancy Stuff

UIkit doesn't handle just core code. It also includes a number of javascript based components that can add that little extra flare to your website. By adding different attributes to tags you can quickly create your own slideshows, modal boxes, parallax containers, accordions.

Customization With the Click

UIkit also makes it easy to get started on your custom CSS to fit your site colors, fonts, and style with the help of their Customizer.

This online tool allows you to make global css changes, without having to dig through thousands of lines of code, and then package your adjustments into a customized version of UIkit ready for you to download. If starting a new web project from scratch, UIkit's Customizer can save you hours of work by streamlining your CSS work.

How Do I Get UIkit on My Website?

So surely there is a catch right? Something so awesome must be a giant headache to install on your site right? The truth is, with some basic HTML knowledge and access to your file structure via FTP, installing UIkit is pretty straightforward.

  1. Make sure you download UIkit from the official UIkit website.
  2. When you have the files downloaded, upload the files into the root of your website.
  3. Then add the UIkit Javascript and CSS to the header of your HTML document.
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>

Alternatively, you can use the UIkit versions that are hosted on the Cloudflare content delivery network 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>

Of course, if you are having trouble installing UIkit or implementing some its features, The Web Mechanics can take care of it for you via one of our website support and maintenance packages. For those of you using a content management system or blogging software like Joomla! or Wordpress, installing UIkit can be a bit trickier. We can also you via one our Joomla! support or Wordpress support packages.