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.

Contents

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.

Defaults

Normalises the HTML elements and adds some very basic styling.

Layout

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

Navigations

Different navigation systems, breadcrumbs and pagination.

Elements

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

Common

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

JavaScript

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/.


`