Shared front-end toolkit

One small set of tools. A consistent feel across every app.

Brand Scripts is the shared front-end framework for ZZE web projects. Build new projects with its stylesheet, design tokens, components, and lightweight JavaScript helpers. No package install or build step required.

1. Add the stylesheet

Place this in the document head. It provides shared colors, layout utilities, forms, tables, badges, modals, and toast styles.

<link rel="stylesheet"
  href="https://bscripts.zzent.org/css/app.css">

2. Import the helpers

Use native JavaScript modules. Import only the functions your app needs from the shared helper file.

<script type="module">
  import { h, modal } from
    "https://bscripts.zzent.org/js/app.js";

  document.querySelector("#open-dialog")
    .addEventListener("click", () => {
      modal("Welcome", h("p", {},
        "Built with shared ZZE helpers."));
    });
</script>

CSS classes

Compose common page layouts and interface elements with the shared utility and component classes.

Layout and spacing

Pass CSS classes through h()'s attributes object to build a toolbar and spaced card.

const orderPanel = h("div", {},
  h("div", { class: "bar" },
    h("h1", {}, "Orders"),
    h("span", { class: "sp" }),
    h("button", { class: "primary" }, "New order")
  ),
  h("section", { class: "card p-2 mb-2" },
    "A card with shared spacing utilities.")
);

Status and data

Use h() to compose status labels and muted text with the shared component classes.

const statusList = h("div", {},
  h("div", { class: "badge-row" },
    h("span", { class: "badge b-ok" }, "Paid"),
    h("span", { class: "badge b-warn" }, "Pending"),
    h("span", { class: "badge b-bad" }, "Failed")
  ),
  h("p", { class: "muted" }, "Updated just now")
);

More JavaScript components

Render tables and status badges, collect form input, and make API requests with the built-in helpers.

Tables and badges

The table helper builds accessible table markup and can make rows interactive.

import { table, badge, le } from
  "https://bscripts.zzent.org/js/app.js";

const columns = [
  { title: "Order", key: "id" },
  { title: "Status", render: row => badge(row.status) },
  { title: "Total", right: true,
    render: row => le(row.total) }
];

const orders = table(columns, rows, {
  onRow: order => openOrder(order)
});
document.querySelector("#orders").replaceChildren(orders);

Rendered table

Forms and API requests

Open a generated form, submit its values, and report success or errors with a toast. Add <div id="toasts"></div> once to your page for notifications.

import { formModal, api, toast, fail } from
  "https://bscripts.zzent.org/js/app.js";

formModal("Create customer", [
  { name: "name", label: "Name", required: true },
  { name: "email", label: "Email", type: "text" }
], async values => {
  try {
    await api("POST", "/customers", { body: values });
    toast("Customer created");
  } catch (error) { fail(error); }
});

Submitted values will appear here.

The button uses the shared modal helper and h element builder.