Changing Less variables

Now, while your terminal is open and yarn watch the command is running let's go to xampp/htdocs/zero-one/assets/app/custom/ folder. That folder contains all Zero One theme files.

To understand how it works:

All files in xampp/htdocs/zero-one/assets/app/custom/ folder override and extend core Uikit files in xampp/htdocs/zero-one/assets/app/src/less/ folder and are compiled as CSS files into xampp/htdocs/zero-one/assets/app/dist/css/ folder.

You can learn more in-depth if you like at https://getuikit.com/docs/less.

Variables (variables.less) file

Locate the xampp/htdocs/zero-one/assets/app/custom/elements/variables.less and open it with your favorite code editor or text editor.

Every variable you see there is a global variable, and change many things.

Change fonts

Font variables are very straightforward, just change them as you wish.

If you want to add custom self-hosted fonts and want a clean setup you can do it like this https://www.one.thezero.club/guide/theme-extending/self-hosted-fonts

Colors, backgrounds, margins, etc.

Everything is very straightforward and it will be easy for you to completely change the theme looks.

Remember, every time you save variables.css file new CSS theme file will be generated. It takes 5 - 10 seconds. And you can check changes by refreshing the localhost website in the browser.

Buttons

Well, the buttons are a bit different. But also easy. You will see this:

//
// Buttons
//

@global-button-style:                           creative; // default, creative
@global-button-border-style:                    default; // default, round

Both of those variables have only two options, and those are obvious. Test it and see.

Try this, it is a smooth rounded button

//
// Buttons
//

@global-button-style:                           default; // default, creative
@global-button-border-style:                    round; // default, round