Installation

Learn where to download and how to compile the UIkit sources into the UIkitty Drupal base theme.

Install UIkitty

Install this theme in the usual way. When you have completed adding the UIkitty theme to your drupal installation you must download the UIkit codebase manually and then put that into the theme folder as directed below

Download UIkit css and js

You have the following options to get UIkit:

  • Download the latest release with pre-built JavaScript and CSS.
  • Install with Yarn to get the pre-built JavaScript, CSS and the Less source files. This is recommended when using UIkit for a typical web project: yarn add uikit
  • Clone the repo to get all source files including build scripts: git clone git://github.com/uikit/uikit.git

File structure of the source

The Github project contains all source files which are compiled into the dist folder. Less sources are compiled into CSS files, JavaScript sources are bundled and transpiled into ECMAScript 5 and icons are bundled into the icon library.

Folder Description
/src Contains all Less, JavaScript and image sources.
/dist Contains compiled CSS and JS, updated on every release.
/tests Contains HTML test files of all components.

Compile from Github source

To compile UIkit yourself, you can use the included build scripts.

# Run once to install all dependencies
yarn

# Compile all source files
yarn compile

# Watch files and compile automatically everytime a file changes
yarn watch

Note Use Node.js version 8.2.0 or higher.

The compiled dist folder now contains additional files which are not checked in by default. The build task will create even more additional files if you have added a custom UIkit theme.

/dist/css

    <!-- UIkit's CSS -->
    uikit.css
    uikit.min.css

    <!-- UIkit's core styles, without the default theme -->
    uikit-core.css
    uikit-core.min.css

    <!-- UIkit's CSS in a right-to-left version -->
    uikit.rtl.css
    uikit.rtl.min.css


/dist/js

    <!-- UIkit's JavaScript -->
    uikit.js
    uikit.min.js

    <!-- Stripped down JavaScript. Core functionality without additional components -->
    uikit-core.js
    uikit-core.min.js

    <!-- Icon Library -->
    uikit-icons.js
    uikit-icons.min.js


    /components