Core

All UIkit core components at a glance.

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

These components generally normalize HTML elements for cross browser functionality and add some very basic styling.

Layout

Apply our fully responsive fluid grid system and panels, common layout parts like blog articles and comments and useful utility classes.

Navigations

UIkit offers different types of navigations, like navigation bars and side navigations. Use breadcrumbs or a pagination to steer through articles.

Elements

Style basic HTML elements, like tables and forms. These components use their own classes. They won't interfere with any default element styling.

Common

Here you'll find components that you often use within your content, like buttons, icons, badges, overlays, animations and much more.

JavaScript

These components rely mostly on JavaScript to fade in hidden content, like dropdowns, modal dialogs, off-canvas bars and tooltips.


Breakpoints

UIkit includes a number of responsive classes to style your content for different viewport widths. This table gives you an overview of the available breakpoints and the associated devices. You can adjust all breakpoints through the Customizer.

Size Breakpoints Device
Mini up to 479px Phones portrait
Small 480px to 767px Phones landscape
Medium 768px to 959px Tablets portrait
Large 960px to 1199px Desktops & tablets landscape
Xlarge 1200px and larger Large Desktops

CSS architecture

To avoid conflicts with other CSS frameworks, all UIkit classes are name-spaced with the uk- prefix. Components are divided into the component itself, sub-objects and modifiers, whose class names always pick up the component name.

Definitions

Object Description
Component Components abstract recurring parts of a website into class-based modules, like buttons for example. These can be reused and combined.
Sub-object Sub-objects are placed within a component to enhance its funtionality, for example a close button in an alert box.
Modifier Modifier classes alter the style of components and their sub-objects, like button colors and sizes.