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
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
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.
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.
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
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.
Are you starting a new project with UIkit?