Zero One Documentation
Search…
Less/CSS setup
Advanced setup for complete control over styling.
If you want complete control over styling then follow this through.
NOTICE: If you compiled a CSS stylesheet using an in-built Theme Styler, when you compile with this approach you will overwrite that stylesheet. You can keep Theme Styler turned off if this approach suits you better.
Front-end is based on LESS/CSS. For easy customization, just install Node and Yarn (1.* version) on your system, change desired variables, compile, and you have brand new CSS stylesheets that follow your design preferences.
By changing variables only you can completely transform the look and feel. You can completely control fonts, colors, global margins, and choose from 3 sets (or 4) of theme button styles. Also, you can easily change the look of every other element, and don't worry you don't need to know LESS/CSS, if you know CSS it will be enough. The code examples will help you understand what to do.
Check out the short preview
Even if you are a beginner and you are doing this for the first time, don't worry it's easy, just follow the instructions.
Prepare the environment
- 1.
- 2.
- 3.If you are on Windows we suggest installing also Git https://git-scm.com/ and use Git Bash terminal. Install it as Git suggests by default.
NOTE: Make sure you install Yarn version 1.* and NOT version 2.*.
Compile
Go to folder
xampp/htdocs/zero-one/assets/app/ (or wherever Zero One theme files are) and run your terminal. Or run your terminal and go to that folder, if you prefer. If you installed Git and didn't change the default installation right-click in the folder will give you the option for Git Bash in the folder.- 1.In your terminal run
yarncommand. It will install all the required scripts. It will add a new foldernode_moduleswith scripts. - 2.When it's finished run
yarn compilecommand. It will compile again everything. - 3.After it is finished you can run
yarn watchcommand, leave the terminal open, and go to change Less variables. It will automatically compile every time you save any Less file belonging to the Zero One theme.
To compile UIkit files yourself, use the included build scripts, and remember the following commands:
1
# Run once to install all dependencies. Also used to update dependencies.
2
yarn
3
​
4
# Compile all source files
5
yarn compile
6
​
7
# Watch files and compile automatically everytime a file changes
8
yarn watch
Copied!
To understand the file structure and process further you can go to https://getuikit.com/docs/installation.
Now, with your terminal open, and
yarn watch is running, let's change some variables.​
Last modified 7mo ago
Copy link