# Less/CSS setup

If you want complete control over styling then follow this through.

{% hint style="danger" %}
**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.
{% endhint %}

Front-end is based on [LESS/CSS](http://lesscss.org/). For easy customization, use included build process, 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 various sets 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.

{% hint style="info" %}
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. 
{% endhint %}

### Prepare the environment

1. Install [Node.js](https://nodejs.org/en/) on your system. Go with the version recommended for most users if unsure.
2. Install pnpm on your system with following command in your terminal `npm install -g pnpm`
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.

### Compile

Go to folder `assets/app/` folder and **run your terminal**. Or run your terminal and go to that folder, if you prefer. If you installed Git Bash 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 `pnpm install` command. It will install all the required scripts. It will add a new folder `node_modules` with scripts.&#x20;
2. When it's finished run `pnpm compile` command. It will compile again everything.
3. After it is finished you can run `pnpm watch` command, 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.&#x20;

To compile UIkit files yourself, use the included build scripts, and remember the following commands:

```bash
# Run once to install all dependencies
pnpm install

# Compile all source files including your theme
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch
```

To understand the file structure and process further you can go to <https://getuikit.com/docs/installation>.

Now, with your terminal open, and `pnpm watch` is running, let's change some variables.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.one.thezero.club/guide/theme-styling/less-css-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.