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.

Theming

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.

Customizer

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?

Author: (500 Posts)

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

Comments