UIkit for Drupal

A lightweight and modular front-end framework
for developing fast and powerful web interfaces.

UIKit is a new revolutionary framework that took the light in July of 2013 as a result of solutions of YOOTheme - popular theme provider and was tested on lots of their templates. And now it's coming to Drupal!


UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.

UIkit offers over 30 modular and extendable 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.

Supported modules

  • UIkit Components: Provides additional components and functionality to the UIkit base theme that cannot be provided through the frontend, such as Views plugins.

Supported themes

  • UIkit Admin: An administration theme using UIkit as a base theme.
  • UIkit Blog: A blog theme using UIkit as a base theme. This theme mimics many of the Layout examples styling from UIkit.

Supported Distributions

  • Webship: A Drupal 8 installation profile to help in speeding up the work of web developers to ship websites in a swift way. Easy deployment using Composer!

Release versioning

Major release versions identify which version of the UIkit framework is supported in the releases below.

  • 7.x-2.x and 8.x-2.x: These releases support version 2.xx.x of the UIkit framework.
  • 7.x-3.x and 8.x-3.x: These releases support version 3.x.x-Beta.xx
    of the UIkit Framework. These releases will not leave the beta stage until the UIkit framework is out of beta.

Drush integration

We have added Drush integration to all four development branches to support generating a UIkit sub-theme from the command line. The Drush command uikit-starterkit (alias uikit-sk) uses the STARTERKIT now included with the project.

Usage example:

drush uikit-sk machine_name "Theme name" --path=sites/default/themes --description="Awesome theme description."

machine_name, --path and --description are all optional; only the theme name (wrapped in double-quotes) is required. Use drush uikit-sk --help to view more detailed help information. If Drush reports it cannot find the command, be sure to run drush cc drush to clear Drush's cache.

UIkit 3 Beta support

YOOtheme is currently working on the next major release, UIkit 3. The missing components in UIkit 3 Beta are:

  • Date- and Timepicker
  • Dynamic Grid
  • HTML editor
  • Lightbox
  • Nestable
  • Slider
  • Slideset
  • Slideshow

Once these components are added to UIkit 3 Beta, we will begin implementing them in the 7.x-3.x/8.x-3.x branches and prepare for stable releases.

X Autoload requirement

In an effort to provide better support for object-oriented programming, UIkit will require the X Autoload module sometime before the 7.x-2.10 release. This will allow sub-themes and supported modules to utilize UIkit's class methods, which is currently under development.

You can follow #2893149: Moving functions to class methods for better OOP organization on the progress and get updates to when this change will actually occur. This will be required sooner in the 7.x-3.x branch, which is still in beta. The 8.x-*.x branches will not be affected since PSR-4 auto class loading is already supported in Drupal 8.

Follow UIkit

Supporting organizations: 

Project Information