Skip to main content
Batoi UIF Docs

CSS & Style Guide

Source-checked CSS setup, tokens, components, layouts, print patterns, and Bootstrap migration.

Version 3.0.0 Version 3 active maintenance Reviewed Sep 14, 2026 Next review Dec 14, 2026
Start Reading Open GitHub Report documentation issue

Owner: Batoi Engineering Reviewed by: Codex source and rendering checks Source revision: UIF 3.0.0 CSS SHA-256 a5cdccee2d2da7150e6c86a37960fad20e2a402a81677be3f6544e007a983c33

Start FastLoad UIF in server-rendered pages and initialize declarative behavior. Chart SupportReview native SVG chart types, Flint mappings, and deferred advanced charts. Micro AppsBuild contained app surfaces that live inside larger Batoi routes. AI and MCPDesign approval UI while privileged tool execution stays server-side.
Browse Batoi UIF Documentation CSS & Style Guide
On this page

CSS & Style Guide

Use this reference to build interfaces with the bundled Batoi UIF 3.0.0 CSS. Examples use native HTML and the shipped uif-* classes; Bootstrap is not required.

Reading path

  1. Getting Started: stylesheet inclusion and RAD theme integration.
  2. Tokens and Theming: colors, typography, spacing, and breakpoints.
  3. Components: buttons, cards, status tags, and navigation.
  4. Forms: labelled controls and accessible validation.
  5. Tables and Registers: assessment grids and responsive tables.
  6. Utilities and Generators: grid, flex, spacing, and visibility.
  7. CSS Authoring Standards: naming, overrides, accessibility, and testing.
  8. Print Styles and Reports: clinical forms and multipage reports.
  9. Bootstrap Migration: equivalents and explicit gaps.

Version and naming boundary

The bundled package identifies itself as 3.0.0. This reference is checked against its CSS package and browser distribution. Pin the stylesheet and JavaScript to the same release; verify your deployed release before copying examples.

The native stylesheet is dist/uif.css, not batoi-uif.min.css. Native tokens use --uif-*, not --batoi-space-*. Native cards use uif-card, not batoi-card. Unprefixed field-grid, grid-2, m-*, d-flex, and is-invalid are not portable UIF contracts. Application themes may define them separately.

See the rendered patterns

Use the Component Gallery for live previews and copy-ready markup. The linked chapters explain the CSS contract; gallery behavior also requires the matching UIF JavaScript. Application-specific print and assessment patterns are labelled as recipes, not additional framework components.

Release checklist

Check light and dark themes, narrow containers, keyboard navigation, visible focus, invalid and disabled states, long content, and print preview. A successful stylesheet request is not sufficient: inspect computed styles and verify that no older theme overrides the intended rules.