Getting started

Get it

Every release is an immutable release on GitHub: once it is out, neither its tag nor its files can change. redz-ui-0.18.2.zip is the folder a project serves, as it is: css/ and js/ with minified files only, the license files and the passport, redz-ui.json - the version, the floor, the files to link, every class, token, command and text key, and the sha256 of every file. The icons are a release of their own, redz-ui-icons-1.13.2.zip, which changes only with Bootstrap Icons: the passport's icons names the version a release needs, and a project keeps it in a folder of its own, so a new release of the library leaves the icons and their cache alone. checks.zip beside the library is the sheet of the probes the release passed in every engine.

gh release download v0.18.2 --repo redz-tech/REDZ.UI --pattern 'redz-ui-*.zip'
gh release verify-asset v0.18.2 redz-ui-0.18.2.zip --repo redz-tech/REDZ.UI
gh release download icons-1.13.2 --repo redz-tech/REDZ.UI --pattern 'redz-ui-icons-*.zip'
gh release verify-asset icons-1.13.2 redz-ui-icons-1.13.2.zip --repo redz-tech/REDZ.UI

Or from jsDelivr, which serves a release by its tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/redz-tech/REDZ.UI@v0.18.2/dist/css/redz-ui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/redz-tech/REDZ.UI@icons-1.13.2/css/icons.min.css">

Include it

The stylesheet, the icons and the scripts, with the page's own words for the few things the library says - every word comes from the page, the library has none of its own.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="redz-ui/css/redz-ui.min.css">
  <link rel="stylesheet" href="redz-ui-icons/css/icons.min.css">
  <script type="module" src="redz-ui/js/redz-ui.min.js"></script>
  <script type="application/json" id="redz-ui-text">{"close": "Close", "confirm.ok": "OK", "confirm.cancel": "Cancel", "busy": "Loading…"}</script>
</head>

• css/redz-ui.min.css is the layers, the tokens, the components and the utilities in one file, within its budget of 36 KB gzipped: the stylesheets css/index.css pulls in, squeezed.
• css/icons.min.css is apart: one mask per Bootstrap Icons file, used only by name. It reaches each file by a URL relative to itself, ../icons/NAME.svg, so the pack's folders keep their shape where a project serves them. A project that marks its static files by their content (?h=…) cannot mark the icons this way, and needs not: the pack's folder is named by its version, which changes only with Bootstrap Icons.
• js/redz-ui.min.js is one ES module of the behaviors, within its budget of 34 KB gzipped: the modules of js/index.js joined, squeezed and given short local names. It sets REDZ.ui for calls from code.
• The island #redz-ui-text gives the library its words, in the page's language: every key of the passport's texts, and for each key of its plurals the other forms its language's plural rules name (found.one, found.few). The example shows four of them.
• The two files are made from css/ and js/, which stay to read. A project that bundles its own may join the stylesheets in the passport's order instead.

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.
• A utility is property-value: d-flex, text-muted. The number is the value - p-16 is 16 px, w-50 is 50 %.
• A condition is a prefix: md:cols-2, print:d-none. A width prefix measures the region the element sits in - a column, a card, a dialog - not the window.
• A state is an HTML attribute: aria-pressed, aria-current, disabled, [open]. A button opens a menu or a dialog with the browser's own command: commandfor + command.
• Tokens are --redz- plus the same words: --redz-text-muted, --redz-space-16.

Theme and direction

Without an attribute the page follows the system's light or dark. data-theme="light" or data-theme="dark" on <html> fixes one - set it on the server, so the page never flashes. Right to left is dir="rtl": one stylesheet serves both directions, by logical properties, and icons that point mirror with flip-rtl.

<html lang="ar" dir="rtl" data-theme="dark">

From script

Menus, tabs, dialogs and their keys need no call: the library listens on the document. Three calls are for code:

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 written in their final form, and a small script stands in below them. Every page of these docs is checked in real engines at the floor and above - the checks.

Below the floor a page shows its own words, not a broken screen. js/floor.min.js, a plain script first in the head, before the stylesheets, marks <html data-floor="below"> when the browser lacks a feature the library is built on; the page's own style shows its "update your browser" then. Every product that loads it judges a browser the same way, and the floor gate holds that no browser at the floor fails it.

<script src="redz-ui/js/floor.min.js"></script>
<style>.floor-notice { display: none; } [data-floor="below"] .floor-notice { display: block; }</style>

From Bootstrap 5.3