uikit is an excellent open source project which contains a widely-encompassing set of styles and styled components for creating responsive UI.

You can download uikit from https://getuikit.com. uikit is such a large project that I don't have room to look into it all here. So, instead, I'm just going to document all of the components etc. and look more closely at just a few of the most common or most useful aspects of the uikit.


UIkit offers over 30 modular and extendible components, which can be combined with each other. Components are divided into different compartments according to their purpose and functionality.


Normalises the HTML elements and adds some very basic styling.


A responsive fluid grid system with additional layout samples and custom classes.


Different navigation systems, breadcrumbs and pagination.


Basic HTML elements. These components use their own classes and therefore don't interfere with any default element.


Often used components such as buttons, icons, badges, overlays, animations and more.


For components that rely mostly on JavaScript like dropdowns, modal dialogs, off-canvas bars and tooltips (full list below).

The uikit themes

There are currently three themes released with uikit and these are: the uikit default theme; the almost-flat theme and the gradient theme.

Click on the buttons below to be taken to a sample page highlighting each particular theme. The sample page shows an assortment of html elements as well as a couple of javascript components.


The uikit fonts & icon fonts

The default font-stack for all uikit's themes is: "Helvetica Neue", Helvetica, Arial, sans-serif; As for the icon font, the popular choice: Font Awesome. You will find the font awesome cheat sheet at: http://fontawesome.io/cheatsheet/.