Uikit Documentation

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.

Minified CSS

Check Minify CSS before downloading your theme, so UIkit removes all line breaks and unnecessary spaces from your CSS, reducing its file size considerably.

RTL

UIkit has the option of on the fly right-to-left language localization. All you need to do is check RTL mode and the whole theme will convert automatically.

Get Less

You can also download only the variables in one Less file to use them in your project.