Add-ons

All kinds of useful, additional components which are not included in UIkit itself.

UIkit offers some advanced components that are not included in the UIkit core framework. Usually you wouldn't use these add-ons in your everyday website. They include stuff like nestables and datepickers, which will come in handy, if you create advanced user interfaces like administration areas.

Usage

After you download UIkit, you can find the add-ons in seperate /css/addons and /js/addons folders. This is what the file structure looks like:

/css/addons
    <!-- Add-ons with the basic style -->
    uikit.addons.css
    uikit.addons.min.css

    <!-- Add-ons with the Gradient style -->
    uikit.gradient.addons.css
    uikit.gradient.addons.min.css

    <!-- Add-ons with the Almost flat style -->
    uikit.almost-flat.addons.css
    uikit.almost-flat.addons.min.css
    ...

/js/addons
    <!-- JavaScript of each add-on and minified version -->
    autocomplete.js
    autocomplete.min.js
    datepicker.js
    datepicker.min.js
    ...

To use one of these add-ons, all you need to do is to add the CSS and the add-on's JavaScript to the header of your document.

Example

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
        <!-- Add-ons CSS -->
        <link rel="stylesheet" href="uikit.addons.css">
        <!-- Datepicker add-on -->
        <script src="datepicker.js"></script>
    </head>
    <body>
    </body>
</html>

Tests

UIkit provides test files for every add-on. Each of these pages contains test cases of its add-on and gives you an overview of all the possibilities that are supported out of the box.

Instead of pre-compiled CSS, we use client-side JavaScript to translate LESS files, so that you can see changes on-the-fly in your browser, when working on your own theme or modifying existing ones. You can switch between all add-ons and themes within the tests and even switch to RTL mode.

Go to tests