styling

zsx / basic

program

$: {
  .title {
    color: cyan;
    ta: center;
    fw: 800;
  }

  .subtitle {
    color: gray;
    fs: 14px;
  }
}

fun main() {
  imu name: str = "world";
  imu view: </> ::= <>
    <h1 class="title">hello, {name}!</h1>
    <p class="subtitle">welcome to zo</p>
  </>;

  #render view;
}

This program styles its markup with a $: {} block. Each selector inside matches part of the view by class, .title styles the <h1 class="title">, and .subtitle styles the <p class="subtitle">.

A property takes a full CSS name like color, or a short form. ta for text-align, fw for font-weight, fs for font-size. The short forms come from Imba.

The block stays scoped to this file, so its rules never leak into another module’s markup. Mark it pub $: {} to share styles across the program instead.

A selector reads like CSS: .name matches a class, and a bare tag like p matches every <p> in the view.