Skip to content

For front-end coders#

The look of the site. Front-end themes, their components, and how a page is assembled from Latte files.

What you will find here#

Chapter What it covers
The template1 theme folder structure, building the styles, where things live
Component catalogue 49 chapters of live components — buttons, forms, cards, galleries…
Splitting a template into Latte files layouts, blocks, parts, components, and what flows in from the presenter

The catalogue is genuinely live, not screenshots

Components render with the very CSS the live site uses. You can click through them, open modals, switch tabs — and above all copy the exact markup through the "show code" toggle. Every chapter is an ordinary manual page; nothing opens off to the side.

Front-end themes#

The system can carry several front-end themes side by side; each is a self-contained folder with its own styles, layouts and components.

Theme Status Catalogue
template1 in use 50 components

Adding another theme adds another row here — the structure stays the same, because the catalogue is imported into the manual from the theme itself.

Where the catalogue comes from

It is not written by hand. Building the manual takes it straight from the theme (www/themes/frontend/<theme>/desktop/ui-demo/) and along the way replaces everything that would be fetched from the internet with a local copy — so that the manual works even after being downloaded to disk. More in the theme page.

The catalogue is a snapshot taken at build time

When the theme changes, the catalogue in the manual catches up only on the next build. Anyone actively working on CSS should use the live version inside the theme — it changes immediately and needs no build at all.