Theming with UIkit

Learn more about the best practices for creating your own UIkit theme

Jul
23
Theming with UIkit

Today we'll show you how easily you can add your own styling to UIkit. First off, some fundamental HMTL and CSS knowledge and the basics of LESS are required.

The Basics

Let's talk about how theming in UIkit works. Each UIkit component is defined by a LESS file. LESS can not be interpreted by browsers and has to be compiled into browser friendly CSS. For that reason we use the Node.js based task runner Grunt. Once activated, it watches the directory you are working on and compiles all LESS files into one single CSS file, whenever you save a change. Learn more about this here.

On our website you can customize UIkit and download the compiled and minified CSS. For an uncompiled version of UIkit, including all source files, clone the GitHub repository. Once downloaded, you can style your theme by using variables and hooks to add your own styling to a selector. If you don't know how to clone, fork and send pull requests, take a look at the GitHub help.

Get started

Let's have a look at a little example of our recommended workflow. You will see that working with UIkit themes is pretty straightforward, once you are familiar the workflow and structure. We will begin by working directly in the source files. After cloning the UIkit repository, you will have the following file structure:

Folder Description
dist Contains all distributed compiled and minified CSS and JavaScript files, as well as fonts.
docs Contains the very UIkit documentation you are looking at right now.
src Contains all UIkit component files and fonts, organized into the sub folders less, js, fonts and themes.
src/themes Contains all themes and their related LESS files.
tests Contains test files of all UIkit components.
vendor Contains external libraries.

Create a new theme directory

Add a new folder inside /src/themes, create a uikit.less file inside this folder and add the @import "../../less/uikit.less"; rule to access the default LESS files. That‘s it! You can start adding your own styling to the default UIkit theme. Alternatively we recommend duplicating and renaming the blank theme to add your styles. It already provides all imports and theme files with their related hooks. There are a number of different ways to add your own styling to a UIkit theme.

Change the values of variables

Change the values of variables Let's say, we want to change the body color. To do so, we use the @global-color variable in the /YOUR-THEME/variables.less file and add our own value. This is because the body selector is set through the variable value @base-body-color in the /less/base.less file, while the @base-body-color is declared by the global variable @global-color in the /less/variables.less file.

Note: UIkit distinguishes between global variables and component variables. Global variables are set to declare component variables, which are intended for use in their related components.

Use hooks to create new declarations

Use hooks to create new declarations The styling of an article is set in the /less/article.less file. You will see that there is a hook .hook-article-title. Open your /YOUR-THEME/article.less file, where you will find the same hook. Just add the text-transform: uppercase; property and you‘re done!

Create your own selector

Create your own selector If there is no hook or variable available, you can just override an existing selector or create your own. For example, if you want to change the link color of widgets, just add the .uk-panel a selector to your /src/theme/YOUR-THEME/panel.less. That's it, no sorcery!

Compile your theme

Once you have finished customizing your theme, run Grunt to compile all LESS files. You will find your final theme CSS file in the /dist folder of your UIkit installation.

Related Posts

If you missed one of our articles about UIkit, here you go:
UIkit released

By Franziska | | Posted in UIkit

Comments (19)

  • bdthemes

    bdthemes

    | Profile |
    hmm it's too good :)
  • marcio.marques.42

    marcio.marques.42

    | Profile |
    Why don´t use https://github.com/leafo/lessphp it´s more standard at this time.
    • sascha

      sascha

      | Profile |
      We are using the original less.js from http://www.lesscss.org/ More standard it can't be ;-)

      leafo is just a PHP port of less.js which doesn't support the latest LESS version and also has a lot of issues.
  • marcio.marques.42

    marcio.marques.42

    | Profile |
    I´m say using LessPHP for compile, only a few hosts allow nodejs
    • sascha

      sascha

      | Profile |
      Actually you compile it locally and not on a server online... Maybe you are mixing UIkit and Warp?
      • marcio.marques.42

        marcio.marques.42

        | Profile |
        Yes i know i´m no problem using nodejs, i´m talk for the general users, there are lot of php tools that compile LESS "on save". For example T3 framework do in that way.
  • kevin.pearson.91

    kevin.pearson.91

    | Profile |
    A little off topic. Whats the future plans for Zoo, is Yoo planning to inject some more life back into it? Also when are we to expect warp 7 template for zoo? Currently Warp 6 is only available.

    Loving the Nano 3 template and the UIkit, slick and so much configuration can be done its unreal.
    • sascha

      sascha

      | Profile |
      ZOO is next in line for a new version with UIkit support ;-)
      • srinath

        srinath

        | Profile |
        Eager to UIKit with ZOO support. Can you give us any expected time-frame please? I hope next version of ZOO will support upgrade from existing version of ZOO without any data/configuration loss.
      • ray.lawlor

        ray.lawlor

        | Profile |
        Sascha, this is great news!

        As soon as you guy released nano3 and UIKit, I could immediately see the possibilities with zoo support!

        That's why I had my own little 'hackathon' and developed those UIKit for zoo plugins.

        I'm really looking forward to seeing what yooguys come up with!
  • triplex79

    triplex79

    | Profile |
    What i not 100% understand, the Ulkit tutorial here is now when i use it independent without Joomla and warp? Or is it when i use Joomla with warp 7? Thank you
  • carl.gerhard.wieners

    carl.gerhard.wieners

    | Profile |
    Once again, I don't see how anyone could get started with the current documentation. You have a zip file, extract it and then what ???
    • ray.lawlor

      ray.lawlor

      | Profile |
      It must be understood that UIKit is a stand-alone framework that can be used on any website, and is separate from Joomla or Warp.

      It is similar to Twitter's Bootstrap framework.

      To use the framework, you have to include the files into your project.

      I've been using UIKit alongside CodeIgnighter all weekend. It's works really well.

      I'm going to spend next weekend building a quick Joomla template with UIkit. (Who needs a social life, eh?)
      • akcreation

        akcreation

        | Profile |
        Hi Ray, did you have any joy making a Joomla Template with UIKit? I'm going to give it a try but just wanted to find out if it was easy enough?
        Thanks
  • adam.bako.27

    adam.bako.27

    | Profile |
    is there some help or tutorial how to implement uikit themes into joomla themes or in warp7? i dont uderstand this at all :) thanks
  • triplex79

    triplex79

    | Profile |
    Is there now new TM for August?

Leave a comment

Please login to leave a comment.