Skip to content

Styling and layouts

SAGL's UI is built with RmlUi: documents are RML (much like XHTML) styled with RCSS (much like CSS). The same engine draws SAGL's own menus and your client scripts' documents, so your UI can look like it belongs.

  • Theme and fonts: SAGL's GTA San Andreas theme, its classes, the game's own fonts, and how branding colours apply.
  • Layouts: anchoring HUDs, dialogs, full-screen menus and pause menu pages, with the RCSS that works (and what doesn't).

Differences from the web worth knowing

  • Every document needs <rml>, <head> and <body>; the body is the document, positioned on the screen.
  • Use dp units: they scale with the screen's height, so a layout made at 1280×720 keeps its proportions at 1920×1080 and 800×600.
  • Fonts are families SAGL loads: Inter, and the game's own pricedown, sa-menu, sa-text and sa-gothic.
  • No box-shadow, filter or backdrop-filter (SAGL's renderer doesn't do render layers). Use font-effect for text outlines and shadows, and decorators for gradients and images.
  • Flexbox works (display: flex); CSS grid doesn't.
  • There's no var(): repeat colours, or set them from script with setAttribute(id, "style", ...).