Introduction

Get familiar with the basic setup and overview of UIkitty.

First of all you need to download UIkitty and install the theme in your Drupal 8 or 9 installation. To get UIkitty up and running you have to install the UIkit files into the theme after installation. 

Download UIkitty


After installing the theme, go to /themes/uikitty and make a new folder named uikit. Download the UIkit files either manually here or with yarn. yarn add uikit Copy the folders in the "dist" directory to the newly created "uikit" folder in the UIkitty theme.

When you are done, there should be a css folder and a js folder inside a uikit folder. like this:

-uikit 
--css 
--js 

Make sure you copy the files inside the css and js folders.

Package contents

The Zip file for UIkit contains the compiled CSS and JavaScript files, which is all you need. Later, you might want to install and compile UIkit yourself and also create your own UIkit theme.

Folder Description
/css Contains the UIkit CSS and a right-to-left version.
/js Contains the UIkit JavaScript and the Icon Library JavaScript.

HTML markup

Add the compiled and minified CSS and JavaScript to the <head> element of your HTML5 document. Also include the UIkit icon library. For your basic setup, that's it.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

Once you have included UIkit into your document, take a look at the available components and create your own markup inside the <body> element of your page.


UIkit autocomplete for your editor

Using UIkit works best if you have a solid code editor, for example Sublime Text or Atom. To be even more efficient, we recommend that you install one of the autocomplete plugins for your favorite IDE or code editor. This saves a lot of time, as you won't have to look up and type all UIkit classes and markup.