Creating a Custom UIkit Theme with Gulp and Less

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:

• Download or clone the UIkit repository.
• Install Node and Gulp, if you don’t have them already.
• 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:

[code language="sass"]
@import "../../src/less/uikit.less";
@import "button.less";
[/code]

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.

Before making any further customizations, you need to make your theme available locally in the Customizer. To do so, in the UIkit root directory, run the following in the terminal:

[code language="bash"]
gulp indexthemes
[/code]

Now launch your local copy of the UIkit website (the one you installed) and click “Customizer” in the navigation bar. When you open the “Select a theme” drop-down list you should see “Dark” at the end of it. At this point, when you select it, you’ll see that there is no styling. Why not? Let’s see.

One thing not mentioned in UIkit’s documentation and which can cost you a lot of headache, is that your theme needs a file called uikit-customizer.less. Create the file and add the following line:

[code language="sass"]
@import "uikit.less"
[/code]

You must put that file, with the above line, in the theme’s root directory (inside the “dark” folder, in our case). If this file is not present, you can’t use the Customizer properly – the theme’s name will appear in the list, but the styles will be missing.

Note: As a rule of thumb, the uikit-customizer.less file should import all files that your theme uses. In our example, importing uikit.less meets this requirement because it includes both the default UIkit styles and your custom button styles.

After adding the uikit-customizer.less file, you will see that this time all components are properly styled. So, we’re ready to move on.

In the component’s drop-down list, placed at the top left corner of the panel on the right side of the Customizer, switch to “Button”. This way you’ll be able to see all available button styles. Now we can open the button.less file and start adding our modifications:

[code language="sass"]
@button-color: #f90;
@button-hover-color: fade(@button-color, 75%);
@button-active-color: @button-color;

@button-background: #000;
@button-hover-background: lighten(@button-background, 20%);
@button-active-background: @button-hover-background;
[/code]

In the above code we’ve modified the variables for the default button’s text and background colors in their normal, hovered, and active states. For other specific buttons, we need to change those variables too:

[code language="sass"]
@button-primary-color: darken(@button-primary-background, 20%);
@button-success-color: darken(@button-success-background, 20%);
@button-danger-color: darken(@button-danger-background, 20%);

@button-primary-hover-color: fade(@button-primary-color, 75%);
@button-success-hover-color: fade(@button-success-color, 75%);
@button-danger-hover-color: fade(@button-danger-color, 75%);

@button-primary-active-color: lighten(@button-primary-color, 35%);
@button-success-active-color: lighten(@button-success-color, 35%);
@button-danger-active-color: lighten(@button-danger-color, 35%);
[/code]

Using Hooks in UIkit

Modifying UIkit’s variables is the easiest way to change the appearance of the framework’s components when dealing with simple modifications. But for more complex customizations, such as adding new rules and/or changing the existing ones without breaking the core, UIkit provides a special mechanism. It uses hooks to safely append your changes. Let’s see this in action. Put the following code below the variables, inside the button.less file:

[code language="sass"]
.hook-button() {
border-radius: 5px 15px;
box-shadow: 2px 2px;
}
[/code]

Here, the hook for the button component is used to add a border radius and a drop-shadow effect.

For even more specific changes, UIkit provides miscellaneous hooks. Each component has such a hook. This is useful for creating new selectors or modifying the ones that have neither a variable nor a hook available for customization. Let’s demonstrate this by adding the following code:

Continue reading %Creating a Custom UIkit Theme with Gulp and Less%

by Ivaylo Gerchev via SitePoint