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.
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.
||Contains the UIkit CSS and a right-to-left version.|
<head> element of your HTML5 document. Also include the UIkit icon library. For your basic setup, that's it.
<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.
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.