Documentation

Template Syntax

Style Declaration

In StyleZero, each style declaration starts with a breakpoint number followed by a set of curly braces containing CSS properties and values.
The most common breakpoint is zero, which applies to all screens.

Here's an example:

			<div class="0{color:red}">Hello World</div>

In this example, the text inside the div element will be displayed in red.

You can also specify multiple CSS properties and values in one declaration, like this:

			<div class="0{color:red;background:black}">Hello World</div>

In this example, the text inside the div element will be displayed in red with a black background.

Or you can specify the same breakpoint multiple times to achieve the same result, like this:

			<div class="0{color:red} 0{background:black}">Hello World</div>

Breakpoints

StyleZero follows a mobile-first approach, which means that every breakpoint is valid for screens with the width equal to the number defined or more.

Here's an example:

			<div class="0{color:red} 641{color:green}">Hello World</div>

In this example, the text inside the div element will be displayed in red by default, but on screens with a width of 641px or more, it will be displayed in green.

You can also specify a range of breakpoints by using a dash between two numbers.

Here's an example:

			<div class="0{color:red} 641-1024{color:green}">Hello World</div>

In this example, the text inside the div element will be displayed in red by default, but on screens with a width from 641px to 1024px, it will be displayed in green.

Containers

If you want the breakpoint to depend on the size of the parent element instead of the screen, you can achieve this by defining the container-type attribute to the parent element and adding the @ symbol after the breakpoint number of the child element.

Here's an example:

			<div class="0{container-type:inline-size}">
			

			 <div class="0{color:red} 641@{color:green}">Hello World</div>
			

			</div>

In this example, the text inside the child element will be displayed in red by default, but when the parent element has a width of 641 pixels or more, it will be displayed in green.

Previous Selector

The StyleZero offers a simple and fast way to reduce redundancy.
By putting a negative number on the breakpoint, it copies the declaration content from as many previous positions as the number you input.

Here's an example:

			<ul>

			 <li class="0{color:red}">Hello World</li>

			 <li class="-1{}">Hello World</li>

			 <li class="-1{}">Hello World</li>

			</ul>

In this example, using -1 copies the content from the immediately previous declaration, therefore every <li> has color red.

You can also add or overwrite some attributes if you want.

Here's an example:

			<ul>

			 <li class="0{color:red;background:green}">Hello World</li>

			 <li class="-1{color:blue}">Hello World</li>

			 <li class="-2{}">Hello World</li>

			</ul>

In this example, using -1 copies the content from the previous declaration, but the text color is being overwritten with the blue color.

Pseudo-Classes

StyleZero supports CSS pseudo-classes for interactivity.
You can specify a pseudo-class after the breakpoint number, like this:

			<div class="0:hover{color:red}">Hello World</div>

In this example, the text inside the div element will be displayed in red when the element is hovered over by the mouse.

Combinators

StyleZero supports CSS combinators too, all except for the space combinator.
You can use them for example to style children elements from a parent element.

Here's an example:

			<div class="0>p{color:red}">
 <p>Hello World</p>
</div>

In this example, the text inside the p element will be displayed in red because it's a child element of the div element with the StyleZero declaration of 0>p.

Javascript

In some cases you may need to use the StyleZero throught Javascript or another languange, so you can use it as string.

For example here a StyleZero declaration is injected to a div element when it's clicked.

			<div onclick="this.className='0{color:red}'">Hello World</div>

Or you can use a script tag.

			<div id="tag_id">Hello World</div>
			

			<script>
			

			 document.getElementById('tag_id').onclick=function(){
			

			  this.className='0{color:red}';
			

			 };
			

			</script>

Restrictions

Because StyleZero works on compile time, all declarations must be static and reside in the template file.

This means that:

An external javascript code cannot containt a StyleZero declaration.
Variables do not work inside StyleZero declarations.

Template Specific

If you desire, you may write CSS and JavaScript that only loads when a specific template is rendered.
To achieve this, simply write your code within a <style> or <script> tag with an attribute called zero.

			<style zero>
			

			 body{
			

			  color:red;
			

			 };
			

			</style>
			


			<script zero>
			

			  console.log('Hello World');
			

			</script>

We recomend to use this method since in that way all the code is compiled to an external file and reduces the network loading time.