05-styling/01-ui-css-and-bootstrap.md

ui.css and bootstrap styling

Every Vroq app should start from the standard ui.css bootstrap.

This file provides the shared visual foundation for apps, including theme variables, typography defaults, spacing tokens, and root app theming behavior.

Standard rule

index.html should load:

<link rel="stylesheet" href="/vroqjs/{{app.vroqjs}}/ui.css" />

This should be treated as part of the standard bootstrap.

Why this matters

Using ui.css gives every app a shared baseline for:

theme variables
surface colors
typography
spacing
radius
motion
root background and text behavior

Without this baseline, apps drift into inconsistent visual systems.

App root expectations

The mounted app should render inside:

<div id="app"></div>

The app UI should then use the Vroq theme variables provided by ui.css.

Rules

always load ui.css in index.html
do not replace it with app-specific global CSS unless clearly justified
prefer theme tokens and component styles over custom global overrides
keep bootstrap styling minimal and standard

Final rule

Start every Vroq app from the shared ui.css foundation and only layer app-specific styling on top of it.