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!
Features:
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
You can find a list of UIkit supported projects hosted on drupal.org at the following documentation pages:
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.
Important notice about updating 7.x-2.x to 7.x-3.x and 8.x-2.x to 8.x-3.x
There is no direct upgrade path from the 2.x branches to the 3.x branches since there are significant changes to the UIkit framework API. In order to update your custom themes, we recommend using the UIkit migration tool to ensure your themes are properly updated.
Sub-theming with Composer
As of Drush 9, themes have been unable to add drush integrations. Therefore, subtheming functions have been moved to a composer script (currently only available on the dev branch of 8.x-3.x). This script requires your Drupal project to be composer-managed.
composer subtheme [machine_name]
- duplicates the contents of the STARTERKIT to new sibling directory titled machine_name
- Finds & replaces all instances of 'STARTERKIT' with 'machine_name' in file names & contents
- Renames my_theme.info.ymltmp to my_theme.info.yml
This script does not make assumptions about the structure of your file system, and places the new subtheme as a sibling to uikit. You'll likely want to move this theme to a custom theme directory.
Usage example:
Create a new project, install uikit base theme
composer create-project drupal/recommended-project my_project
cd my_project
composer require drupal/uikit
Move into uikit, run script
cd web/themes/contrib/uikit/
composer subtheme my_theme
Move subtheme to custom theme directory
mv ../my_theme ../../custom/my_theme/
