Get started Get familiar with the basic setup and structure of UIkit.

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.

    /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.eot
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    FontAwesome.otf

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

    <!-- Advanced components -->
    /components

    <!-- Core components -->
    /core

…

How to customize Create your own style with the customizer.

UIkit comes with a customizer that enables you to make adjustments to the theme you are using with just a few clicks and no need for any CSS knowledge. You can then download your new CSS and even the pending Less variables, all ready to use.

NOTE To optimize performance, we recommend disabling add-ons, like Web Developer and Firebug in Firefox

Usage

Choose the theme that you would like to customize from the select box. Click inside a color square to open the dialog and change your color. To adjust a numeric value, like width or margin, just click in the text area and type your own value. You can even use a different unit and the customizer will recalculate automatically. Once you are satisfied with your adjustments, hit Get CSS to download your new theme and copy it into your UIkit /css folder.

Advanced mode

The variables within the customizer are separated into two main parts. First, variables which are displayed by default and variables which only appear in the Advanced Mode. The visible variables are often the global ones, because they usually define the value of component variables. To see the component variables, just check the Advanced mode box.

More

By default, variables whose value is defined through another variable are hidden. In Advanced mode you can see a (More) button next to groups that include these kinds of variables. This option is extremely powerful as it enables you to set your own value for any component variable.

Less & Sass files A separate Bower UIkit repository contains all distribution files including Less and Sass.

The great thing about UIkit is that you can easily integrate its source files in your project to keep your custom project workflow for building assets and stay with your preferred CSS preprocessor.

UIkit uses the package manager Bower to load assets. Therefore UIkit automatically generates the distributions into a separate Bower UIkit repository siddim.com. It contains all CSS, Less, SCSS and JavaScript files from UIkit and its components.

…