Creating a UIkit sub-theme

This guide provides easy-to-follow instructions on how to use Drush to create a UIkit sub-theme.

Note: These instructions do not work when using Drush 9. See bug report Command "uikit-sk" is not defined. Drush integration does not work with Drush 9.

Drush is a command line shell and Unix scripting interface for Drupal. Drush core ships with lots of useful commands for interacting with code like modules/themes/profiles. Similarly, it runs update.php, executes sql queries and DB migrations, and misc utilities like run cron or clear cache. Drush can be extended by 3rd party commandfiles. To learn more about Drush, including how to install it, visit Drush docs.

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.

Once the sub-theme has been created you can begin customizing the sub-theme. The file structure for the sub-theme mirrors the file structure Drupal recommends to make it easy to find the files and functions you want to edit. The only main difference is where common theme functions are located, which is discussed in the next section.

Theme functions

Common themeing functions have been split up and placed into relative include files in order to make it easier to locate a function you wish to edit/create. All theme functions (template_preprocess_HOOK(), hook_HOOK_alter(), theme_HOOK(), etc.) can be found under the includes directory of the sub-theme.

Sub-theme includes directory structure:

|-includes
  |  |-alter.inc
  |  |-preprocess.inc
  |  |-process.inc
  |  |-theme.inc

The filename of each include file makes it easy to understand which themeing functions are located where. Common functions you will utilize during development already exist in some of these files, although they are commented out by default.

To enable the use of these functions, simply change:

/**
 * Implements hook_theme().
 */
/* -- Delete this line if you want to use this function
function amazing_name_theme($existing, $type, $theme, $path) {
}
// */

to

/**
 * Implements hook_theme().
 */
function amazing_name_theme($existing, $type, $theme, $path) {
}

Be sure to clear the cache in order for the function you uncommented to be recognized by Drupal.

To learn more about what you can do with your UIkit sub-theme, read the Themeing Drupal 8 documentation guide.