Skip to main content
Batoi UIF Docs

Utilities and Generators

Use bounded UIF layout utilities and copy-ready generators without introducing an arbitrary utility runtime.

Version 3.0.0 Version 3 active maintenance Reviewed Aug 11, 2026 Next review Nov 11, 2026
Start Reading Open GitHub Report documentation issue

Owner: Batoi Engineering Reviewed by: Batoi UIF Maintainers Source revision: b2f3478

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 Utilities and Generators
On this page

Utilities and Generators

Batoi UIF utilities are a bounded composition layer for server-rendered application screens. Use components for repeated behavior, tokens for theme values, and utilities for layout, spacing, alignment, visibility, and small one-off adjustments.

Layout and Spacing

UIF provides a complete 12-column grid and logical margin and padding matrices. These utility matrices were completed in version 2.3 and remain available in v3.

  • Use uif-col-1 through uif-col-12 inside a 12-column UIF grid.
  • Use margin and padding values from zero through five.
  • Prefer logical inline and block directions so layouts work in both left-to-right and right-to-left documents.
  • Use gap utilities for spacing between grid or flex children.
  • Keep spacing token-based; UIF does not generate arbitrary-value utility classes.
<section class="uif-form-grid-12 uif-gap-4 uif-p-4">
  <article class="uif-col-8 uif-ps-3">Primary content</article>
  <aside class="uif-col-4 uif-mt-2">Supporting context</aside>
</section>

Consult the bundled utility migration matrix before translating Bootstrap or utility-heavy layouts, because UIF intentionally provides a curated rather than unlimited class surface.

Copy-ready Pattern Examples

The component gallery includes complete markup for typography, list groups, counters, horizontal tabs, breadcrumbs, button groups, and theme controls. Copy the full example and then adapt content, labels, destinations, and server-rendered state.

Image Slider Generator

The image-slider generator produces single-item or multi-item carousel markup. Choose the number of visible items and navigation step, then review image alternatives, captions, controls, status text, and responsive behavior before using the generated markup.

Widget Generator

The widget generator provides a starting structure for task-focused application panels. Treat generated output as editable interface markup: connect it to authorized server data, retain semantic headings and labels, and remove controls the workflow does not support.

Generators do not publish content, crawl remote sites, create permissions, or execute privileged actions. Those responsibilities remain with the host application and its governed backend.