Article: Creating a Custom UIkit Theme with Gulp and Less

[SitePoint_Articles]

Extract from SitePoint article “Creating a Custom UIkit Theme with Gulp and Less” by Ivaylo Gerchev

Everyone wants to be unique. I guess you won’t be super happy if in your surroundings there are many people looking just like you, right? This holds true for the other people too. Your friends also won’t be happy to see clones of you everywhere. The same is true for our websites.

Nowadays, building a website with a front-end framework is common. The problem though is that many people blame such frameworks for making all websites “look the same”. But the tool isn’t to blame if developers aren’t willing to make the necessary customizations.

For those of you who want the websites you build to stand out from the crowd, I’ll demonstrate how you can use UIkit’s Customizer to create different themes and theme variations (styles). The process is straightforward, but you need a proper workflow to do it with a minimum amount of headache.

Setting Up Customization

Let’s say that you want to create a dark theme for your website with orange as an accent color. Also, you want two more variations of that theme with blue and green accent colors. Let’s see how we can do it. (Note: For the sake of brevity, I’ll use only buttons to demonstrate the process).

We’ll need to start with ensuring the following steps are complete:

1. Download or clone the UIkit repository.
2. Install Node and Gulp, if you don’t have them already.
3. Install UIkit’s development dependencies. You can do this by
   navigating to the UIkit root directory and running npm install from
   the terminal.

When all of this is set up correctly, we can start creating our theme.

Creating our Theme

Still in the root directory, create a folder called “custom”. In that folder, create another one called “dark” and inside it create a file called uikit.less. Open the file and add the following:

@import "../../src/less/uikit.less";
@import "button.less";

The first line will get all Less files from the core framework and the second line will import the file you’re going to use to modify the default UIkit buttons. Save and close the file and create the aforementioned button.less file in the same directory.

Continue reading article on SitePoint …