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  -fsS https://repo.stylezero.org/bin/last/?lin-x64-install | bash

If you care about security, you can download the install.sh, check it, and run it.
Otherwise download the file separately and check that the hash match with 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 --setup command.

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

			stylezero --setup 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