Styling and layout

Your Loom UI is a standard Vite + Solid app. CSS works the way frontend developers expect: global stylesheets, CSS modules, utility frameworks, custom properties, fonts, transitions, and animations.

Root stylesheet

The sample UI imports a single global stylesheet from index.tsx:

import './styles.css';

Use this file for resets, design tokens, global layout primitives, and screen containers.

Fullscreen screens

Loom renders as a fullscreen overlay, so most screens should fill the viewport:

.screen-fullscreen {
  min-height: 100vh;
  width: 100vw;
}

Use normal CSS layout tools like grid and flexbox for menus, HUD regions, and panels.

Transparency

The UI can be transparent over the game. Keep the page background transparent unless you want a full-screen menu backdrop:

html,
body,
#root {
  margin: 0;
  min-height: 100%;
  background: transparent;
}

For menus, set an explicit backdrop on the screen or panel that needs it rather than on the entire app.

Fonts

Ship fonts with your UI app and load them with @font-face:

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
}

Fonts are bundled into the production UI build like any other static asset.

CSS frameworks

You can use CSS frameworks if they work in a normal Vite app. Add the package to your UI project, configure Vite or PostCSS as needed, then restart the dev server.

For dependency setup, see Adding npm packages.