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.