Utilities and Generators
Exact utility surface
| Purpose | Native classes |
|---|---|
| Two, three, four columns | uif-grid-2, uif-grid-3, uif-grid-4 |
| Generic grid / vertical stack | uif-grid, uif-stack |
| Flex / wrapping cluster | uif-flex, uif-cluster |
| Flex direction / wrapping | uif-flex-col, uif-flex-wrap |
| Cross-axis alignment | uif-items-start, uif-items-center, uif-items-end |
| Distribution | uif-justify-between, uif-justify-center |
| Display | uif-block, uif-inline, uif-inline-block, uif-hidden |
| Text | uif-text-left, uif-text-center, uif-text-right, uif-text-muted |
| Overflow | uif-overflow-auto, uif-overflow-hidden |
Margin and padding utilities have uif- prefixes. Use m / p for all sides, mt/mb and pt/pb for top/bottom, ms/me and ps/pe for logical start/end, and mx/my and px/py for inline/block axes. Values 0–5 are supported, with zero literal and 1–5 mapped to spacing tokens. Additional uif-p-6 and gaps 1–6 exist; do not assume every utility supports 6–8 merely because those tokens exist. uif-mx-auto centers a constrained block.
Responsive behavior
uif-container establishes an inline-size query container. The two/three/four-column utility grids collapse to one column when their query container is at most 40rem wide. Without a suitable ancestor container, that rule will not activate. uif-form-grid-12 uses column spans and separate viewport rules; inspect the actual component behavior instead of assuming Bootstrap breakpoints.
<div class="uif-container">
<div class="uif-grid-2 uif-gap-4">
<section class="uif-card">First panel</section>
<section class="uif-card">Second panel</section>
</div>
</div>Unprefixed field-grid and grid-2 may be application classes; use uif-form-grid or an explicit feature-owned responsive layout where appropriate. Do not invent uif-col-md-6 or uif-d-lg-none. See Bootstrap migration.
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-1throughuif-col-12inside 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.