# Getting started REDZ.UI is a stylesheet, its icons and one small script on the browser platform. Nothing is built where it is used: link the three files, write Bootstrap-like markup, and the browser does the rest. ## 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. ```js 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: ```html ``` ## 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. ```html ``` - `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 `` 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 ``` ## From script Menus, tabs, dialogs and their keys need no call: the library listens on the document. Three calls are for code: | Call | Does | | --- | --- | | `REDZ.ui.toast({title, text, tone, action, persistent})` | Shows a notice; answers a function that closes it. [Toasts](toast.md) | | `await REDZ.ui.confirm({title, text, note, sections, ok, cancel, tone, phrase})` | Asks a question in a dialog; answers `true` or `false`. [Dialogs](dialog.md) | | `await REDZ.ui.busy(element, promise)` | Marks a button or a region busy until the promise settles. [Busy](busy.md) | ## 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](https://redz-tech.github.io/REDZ.UI/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 `` 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. ```html ``` ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `data-bs-theme` | `data-theme` | rename | light or dark on |