Get started

Get familiar with the basic setup and structure of UIkit.

First of all you need to download UIkit. You can find the whole project and all source files on GitHub.

File Structure

In the ZIP file you will find all CSS, JavaScript and font files ready to use for your project. The core framework of UIkit has almost no styling in order to keep it slim. Therefore we provide two addidional distributions with a gradient and an almost flat style. Each style comes as a single CSS file as well as a minified version.

Folder	Description
`/css`	Contains all UIkit CSS files and minified versions.
`/fonts`	Contains fonts used in UIkit.
`/js`	Contains all UIkit JavaScript files and minified versions.

/css
    <!-- UIkit with the basic style -->
    uikit.css
    uikit.min.css

    <!-- UIkit with Gradient style -->
    uikit.gradient.css
    uikit.gradient.min.css

    <!-- UIkit with Almost flat style -->
    uikit.almost-flat.css
    uikit.almost-flat.min.css

    <!-- Advanced components -->
    /components

/fonts
    <!-- FontAwesome webfont -->
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    fontawesome-webfont.woff2
    FontAwesome.otf

/js
    <!-- JavaScript and minified version -->
    uikit.js
    uikit.min.js

    <!-- Advanced components -->
    /components

    <!-- Core components -->
    /core

HTML Page Markup

First off, make sure you have a solid code editor, for example Sublime Text. You need to add the compiled and preferably minified UIkit CSS and JavaScript to the header of your HTML5 document. jQuery is required as well. And that's it!

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>
    </head>
    <body>
    </body>
</html>

Once you have finished implementing UIkit into your webpage, take a look at the UIkit components and get an overview of what UIkit is offering.

UIkit on cdnjs.com

All versions of UIkit are hosted on the Cloudflare content delivery network via cdnjs.com.

Example


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/css/uikit.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>

UIkit autocomplete for IDE's

To work even more efficiently, we recommend that you install one of the autocomplete plugins for your favourite IDE or code editor. This saves loads of time, as you won't have to look up and type all UIkit classes and markup.

UIkit autocomplete for Sublime. Install via Sublime Package Control.
UIkit autocomplete for PHPstorm. Install via PHPstorm Plugin Settings.
UIkit support for Atom. Look for atom-uikit in the Atom package manager.