The template1 theme#
The reference front-end theme the shared design system grew out of.
Root: www/themes/frontend/template1/desktop/.
Folder structure#
| Folder | What is in it |
|---|---|
assets/scss/ |
style sources (see below) |
assets/css/style.css |
the built output the site loads |
assets/js/ and assets/dist/bundle.js |
JavaScript source and build |
assets/imgs/ |
theme images |
layouts/ |
Latte layouts and their parts — its own chapter |
ui-demo/ |
the live component catalogue the catalogue in the manual is made from |
Styles#
The entry point is assets/scss/style.scss and the import order is binding:
@use "utilities"; // the whole of Bootstrap, self-hosted
@use "abstracts" as *; // tokens, functions, mixins (emits no CSS)
@use "base"; // reset, general styles, utility classes
@use "components"; // system UI components
@use "layout"; // header, footer, main, parts
@use "modules"; // styles of Nette components, split per module
@use "custom"; // ← the ONLY place for this theme's deviations
Deviations belong exclusively in custom/
Everything above it is the shared base other themes use too. An edit straight
in components/ or base/ propagates to places nobody expects it to.
utilities comes first here, last in the administration
That is not an oversight. The front end takes the whole of Bootstrap at the spot
where a CDN link used to sit — that is, before the theme. The administration
emits only the grid and utility classes with !important, which have to beat
everything, so there they come last.
Building the styles:
npx sass is not the same as sass
They are different compiler versions and can produce different output. Use the one the theme is normally built with.
JavaScript goes through webpack (webpack.config.js, entry assets/js/entry.js,
output assets/dist/bundle.js).
Component catalogue#
The full overview is in its own chapter — 49 chapters split into groups: foundations (tokens, colours, roles and skins), components, navigation, feedback, content, inputs and the rest.
How the catalogue gets into the manual#
It is not written by hand. Building the manual runs manual/tools/import-ui-demo.py,
which takes the contents of ui-demo/ straight from the theme and strips out
everything that would be downloaded from the internet:
| In the theme (live) | In the manual (after import) |
|---|---|
| Bootstrap from jsDelivr | a copy from node_modules — the version the theme is really built against |
| Font Awesome from cdnjs | a copy from node_modules |
| fonts from Google | downloaded woff2 plus our own @font-face |
../assets/css/style.css (live CSS) |
a snapshot of the theme's CSS |
| placeholder images from picsum, unsplash… | generated SVGs of the same dimensions |
| the demo chrome (its own header and left menu) | discarded — the manual's own menu replaces it |
Why go to that trouble
The manual has to work after being downloaded into a folder and opened with a double click, with no internet connection. If the catalogue pulled its styles from a CDN it would look broken once downloaded — and nobody would notice on a developer machine, which is online. The import therefore checks that no outbound link is left in the imported content and fails the build if it finds one.
The “Pages” group is left out of the manual
It was not a component but a whole sample page. It has no place in a parts catalogue; anyone looking at how a full page is assembled belongs in Splitting a template into Latte files.
One exception: the map
Google Maps loads from the internet by its very nature, so the Google Maps page shows an empty frame offline. Everything else works without a network.
Use the live version while working on CSS
The catalogue in the manual is a snapshot taken at build time. Anyone editing
styles should open ui-demo/ inside the theme — it changes instantly and needs
no build.