REDZ.UI

The interface library of the REDZ products: plain CSS and small JavaScript on the browser platform - no framework, no build step.

0.18.2 · a row keeps its open menu whole Documentation Why REDZ.UI Source on GitHub

Demo screens

The approved prototype of the look, written by the reading rules below. A switch at the bottom of each screen turns the system, light and dark themes, left-to-right and right-to-left, and the compact density.

A listExcursions: saved views, filters, a batch bar, row actions and statuses. A resource pageOne excursion: languages, sites, facts and a side panel. A settings formAdmin branding: floating fields, a color choice, previews and a save bar.

What it is

  • Tokens, a reset, cascade layers, components and utilities with Bootstrap 5's names, written as plain CSS files. The utilities are generated from one vocabulary file and committed, so nothing is built where the library is used.
  • Behavior of the widgets that the platform does not give by itself - menus and tabs by keyboard, toasts, a combobox - as small JavaScript that attaches by delegation.
  • Light, dark and system themes; left-to-right and right-to-left from one stylesheet; WCAG 2.2 AA in both themes.
  • Documentation with a page per component, and every component in every state on one page - the fixture checked in Chrome, Safari and Firefox at the floor and above, with its Arabic twin.
  • Two agent skills - building screens, and moving a project from Bootstrap 5.3 with a scan and a map of every Bootstrap class - and llms.txt.

How it reads

  • A component, its variant, its size and its parts are one class each: btn btn-primary btn-sm, card-header. Bootstrap 5's names, and Bootstrap 6's where it moved onto the platform: dialog, drawer, menu, check, switch.
  • A utility is property-value with Bootstrap 5's names: d-flex, justify-content-between, text-muted.
  • A condition is a prefix: md:cols-2, print:d-none. A width prefix measures the region the element sits in - a column, a dialog, a card - not the window.
  • The number is the value: p-16 is 16 px, rounded-8 is 8 px, w-50 is 50 %, cols-3 is three columns.
  • The parent sets the grid: grid md:cols-2 gap-16; a child spans with span-full or lg:span-8.
  • A state is an HTML attribute: aria-current, aria-pressed, disabled, [open]. A button opens a dialog with the browser's own command: commandfor="edit" command="show-modal".
  • Tokens are --redz- plus the same words: --redz-text-muted, --redz-space-16.
<div class="grid md:cols-2 gap-16">
  <section class="card">
    <div class="card-header"><h2>Price</h2></div>
    <div class="card-body vstack gap-8">…</div>
  </section>
  <button class="btn btn-primary" commandfor="edit" command="show-modal">Edit</button>
</div>

Icons

Bootstrap Icons 1.13.2, one SVG file per icon, under their own class names. Each icon is a CSS mask over its file: the color of the text around it, no font, no JavaScript, no build.

<i class="bi bi-pencil" aria-hidden="true"></i>

Browsers

Bootstrap 6's floor: Chrome and Edge 130+, Firefox 132+, Safari 18+ on macOS and iOS.

What must work rests on features of the floor; invoker commands and anchor positioning are enhancements, with a small script standing in below them.

Checks in real engines - every page, at the floor and above, with its shots.