StyleZero

Documentation

Getting Started

Introduction


StyleZero is a lightweight and intuitive CSS framework that simplifies the process of styling websites.
It follows a mobile-first approach and allows developers to define styles using a unique simple syntax.

Install


Stylezero is currently available only for x64 machines.
To install it we reccomend to use the following methods.


On Windows


Download the installer from here and double-click it.
The first time it may show a blue box to confirm your action.
In that case click the See more and then Run anyway.

If you care about security, you can check the file hash here before the execution.


On Linux


Open the terminal and run the following command.

curl https://res.stylezero.org/bin/last/?lin-x64-install -sSf | bash

If you care about security, you can download the install.sh file separately and check inside if the hash variable value matches the one found here.


Verification


To verify the successful installation of StyleZero, open a new cmd/terminal and run the following command:

stylezero --version

If the version number is displayed, StyleZero has been successfully installed.

Quick Start


The fastest way to start using StyleZero is to utilize the --init command.

First open an empty directory with the cmd/terminal.
Then run the --init html command and start the stylezero in watch mode.

stylezero --init html
stylezero --watch


This will automatically create the following files:

  • stylezero.json - this is the cofiguration file.
  • view/index.html - this is the source template file.
  • index.html - this is the generated template file.


Open the source template with your text editor and the generated template with your browser.
Everything you write on the source template will be available on the generated template as long as StyleZero is active in watch mode.

Basic Syntax


The following is a quick example of a button with red text made with StyleZero:

<button class="0{color:red}">BUTTON</button>

In the above example, the orange represents the breakpoint.
In this case, the zero means that there is no breakpoint, and the style will be applied to all screens.
The blue represents the CSS, as you would write it in a CSS file.


Let's add more styling.
In the following example, the same button will have green and bold text on medium (641px) or larger screens:

<button class="0{color:red} 641{color:green;font-weigth:bold}">BUTTON</button>


Learn more about the template syntax