zilk

zilk is an attempt to simplify web development without sacrificing freedom. Like silk, it should be flexible, almost invisible, and structurally sound.

zilk provides rendering utilities for creating isomorphic user interfaces.

it was built to be used in conjunction with the build tool: zilker

Example

  // views/Example.js
  import { html, css, classify } from 'zilk'

  const { TITLE, BUTTON } = classify('Example')

  // 1. Render function (used for SSR and browser rendering)
  export default ({
    title="Default Title",
    btn_href="https://github.com/m4r-sh/zilk",
    btn_label="Zilk Docs"
  }={}) => html`
    <h1 class=${TITLE}>${title}</h1>
    <a class=${BUTTON} href=${btn_href}>
      <span class=${BUTTON.LABEL}>
        ${btn_label}
      </span>
    </a>
  `

  // 2. Class-based event handlers, auto-attached on browser
  export let handlers = {
    [BUTTON]: {
      init(){
        console.log('Runs once per element')
      },
      onclick(event){
        console.log('Click event')
      }
    }
  }

  // 3. Class-based CSS styles - extracted at build time
  export let style = () => css`
    .${TITLE}{
      font-size: 3rem;
      color: #555;
    }
    .${BUTTON}{
      padding: 1rem 0.5rem;
      background: #000;
    }
    .${BUTTON.LABEL}{
      color: #fff;
    }
  `