A First Look at UIkit – A New Front-End Framework

Recently a new modular front-end framework has been released that is well worth mentioning. Simply called UIkit, it is a lightweight framework, developed in LESS, that provides a comprehensive and extensive collection of HTML, CSS, and JS components. It is fully responsive and follows the mobile-first approach to for a consistent mobile experience. To avoid conflicts with custom CSS or other frameworks it uses consistent and conflict-free naming conventions, with classes name-spaced with the uk- prefix.

The new front-end framework UIkit

UIkit comes loaded with plenty of components. Here is an overview:

  • Defaults: Normalize, Base, Print
  • Layout: Grid, Panel, Article, Comment, Utility
  • Navigations: Nav, Navbar, Subnav, Breadcrumb, Pagination, Tab
  • Elements: List, Description list, Table, Form
  • Common: Button, Icon, Close, Badge, Alert, Thumbnail, Overlay, Progress, Search, Text, Animation
  • JavaScript: Dropdown, Modal, Off-canvas, Switcher, Tooltip, Scrollspy, Smooth scroll

With its solid grid system you can build fully responsive, fluid and nestable grid layouts, and provides unit classes for halves, thirds, quarters, fifths, sixths and tenths. The grid classes allow you to create different layouts for mobile, tablets and desktops. And another highlight worth mentioning is the ‘off-canvas’ component which lets you create a smooth off-canvas navigation for mobile devices.


UIkit comes with very basic styling, which makes it is very easy to customize every single page independently. Nearly everything is customizable through LESS variables and mixins, allowing you to add your own theme without bloating the code and without having to edit any of the core framework files.

UIkit theming

Themes can also be maintained and updated independently from the core framework making it useful if you want to create WordPress themes or Joomla templates.


The UIkit homepage has a web-based WYSIWYG customizer that allows you to adjust colors, backgrounds, sizes and much more without writing any code. The customizer offers 3 starter themes to choose from: A plain and basic theme, an almost-flat theme and a gradient theme. You can also choose from more than 650 Google fonts and more than 350 icons thanks to FontAwesome.

UIkit customizer

Once you are finished customising you can download the final CSS file, with an RTL version also provided out of the box.

Lightweight and Fast

It is notable that UIkit is very small in file size, thus providing fast loading times. The developers have tried to find a balance between providing all of the features needed for modern web development and not bloating the code. The following chart shows the file sizes of the minified CSS and JavaScript files of UIkit.

UIkit file size chart

Who is behind UIkit?

UIkit has been developed by YOOtheme, a premium theme and extension provider for WordPress and Joomla. They developed UIkit because they needed a lightweight and themable front-end framework to streamline their regular theme releases. Issues are fixed and improvements are added on a daily basis. Besides the UIkit project itself UIkit is also distributed as a part of Warp, an open-source theme framework for WordPress and Joomla.

Head over to the UIkit homepage to learn more about it or fork the project on GitHub. UIkit is open source and MIT licensed.

Are you starting a new project with UIkit?

(427 Posts)

This post has been written by the team here at Speckyboy Design Magazine.


  • Hassan Sadek

    I download it & I like it.
    Thank you.

  • Great to have people share this with the community… you people are awesome! More like this please

  • Jame Adreen

    extremely lightweight..but takes a bit of time due to lack of documentation

  • We will see…

  • I have a few new projects on the go, where I’m using UIKit and have been really impressed with how solid it is already.

    I found the classes and overall naming convention pretty easy to get the hang of and was building pretty complex layouts in no time.

    One thing I would like to see in the future, is a custom build tool, similar to that of Bootstrap and Foundation.

  • the_real_patrick_bateman

    I’m with you 100% on the custom build tool. It is quite light-weight for what it provides, but sometimes you just don’t need every single component and it’d be great to be able to easily grab only the pieces you need for a project.

  • it’s really awesome, already start design with uikit ;)

  • Den

    Was pleasantly suprised by the usability. I don’t like the Warp framework. But I will definitely do a project with it sometime soon to try it out. Used Bootstrap and Foundation so far.

  • OMG, this is just awesome, thank you for sharing it with us.