UIKit is a lightweight front-end framework, developed in LESS, similar to Foundation by Zurb that provides a comprehensive and extensive collection of HTML, CSS and JS components to get your website going.

Web Design Front-end UIKit

Every web designer should always take full advantage of a complete front-end framework to rapid prototype and fine-tune their web application. UIKit is fully responsive and follows the well-adapted mobile-first approach for a consistent responsive experience across tablets and mobile devices.

UIKit implements a unique conflict-free naming convention, with classes namespaced with the uk- prefix - allowing you to plugin UIKit alongside any other frameworks you may want to use.

UIKit comes with the following components (view them all here):

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

Fully Responsive

UIKit includes a responsive grid system allowing you to build fully responsive, fluid and nestable grid layouts. UIKit allows you to build a grid layout for halves, thirds, quarters, fifths, sixths and tenths - whilst also allowing you to design different layouts for mobile, tablet and desktop PCs.

UIKit includes a bonus component called the ‘off-canvas’ component which lets you create a smooth off-canvas navigation for mobile devices.

Lightweight and Efficient

UIKit is a small compact build, providing efficient and fast load times. It provides a unique balance between providing all of the features needed for modern web development and not over-killing the code base. When minified, UIKit totals ~90kb (CSS, 47kb - Icons, 16kb - Javascript, 27Kb).


As UIKit is developed with LESS, you're able to build your own theme on-the-fly by adjusting the variables and mixins. This means you can put together your own theme without having to even dive into the core of the framework.

Web Design UIKit Customisable

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.

If you don't want to get your hands dirty, the UIKit website provides an online editor that lets you tweak the colours of every aspect, building your custom package for you.

Web Design UIKit Themes

The customiser tool offers 3 starter themes to choose from: a plain and basic theme, an almost flat theme and a gradient theme (creatively named, eh). You can also choose from more than 650 Google Fonts and more than 350 icons provided by FontAwesome.

You can download UIKit from here.

What do you make of UIKit? You can get in touch with us by mentioning #ALJTMedia on Twitter, leaving a comment on our Facebook, Google+ or LinkedIn page, or writing a comment below.

Make your Instagram beautiful. Preview your images before you post them ›