Šablona template1#
Referenční frontendová šablona, ze které vznikl společný design systém.
Kořen: www/themes/frontend/template1/desktop/.
Struktura složek#
| Složka | Co v ní je |
|---|---|
assets/scss/ |
zdrojové styly (viz níž) |
assets/css/style.css |
sestavený výstup, který si bere web |
assets/js/ a assets/dist/bundle.js |
zdrojový a sestavený JavaScript |
assets/imgs/ |
obrázky šablony |
layouts/ |
Latte layouty a jejich části — samostatná kapitola |
ui-demo/ |
živý katalog komponent, ze kterého vzniká katalog v manuálu |
Styly#
Vstupní bod je assets/scss/style.scss a pořadí importů je závazné:
@use "utilities"; // celý Bootstrap, self-hosted
@use "abstracts" as *; // tokeny, funkce, mixiny (negeneruje CSS)
@use "base"; // reset, obecné styly, utility třídy
@use "components"; // UI komponenty systému
@use "layout"; // header, footer, main, parts
@use "modules"; // styly Nette komponent, dělené po modulech
@use "custom"; // ← JEDINÉ místo pro odchylky téhle šablony
Odchylky patří výhradně do custom/
Všechno nad ním je společný základ sdílený s dalšími šablonami. Úprava přímo
v components/ nebo base/ se propíše i tam, kde ji nikdo nečeká.
utilities je tu první, v administraci poslední
Není to nedopatření. Front přebírá celý Bootstrap na místě, kde dřív stával
odkaz na CDN — tedy před šablonou. Administrace generuje jen grid a utility
třídy s !important, které musí vyhrát nad vším, takže tam stojí poslední.
Sestavení stylů:
npx sass není totéž co sass
Jsou to různé verze překladače a umí vyrobit odlišný výstup. Používejte ten, kterým se šablona sestavuje běžně.
JavaScript jde přes webpack (webpack.config.js, vstup assets/js/entry.js,
výstup assets/dist/bundle.js).
Katalog komponent#
Kompletní přehled je v samostatné kapitole — 49 kapitol rozdělených do skupin: základy (tokeny, barvy, role a skiny), komponenty, navigace, zpětná vazba, obsah, vstupy a zbytek.
Jak se katalog dostane do manuálu#
Není psaný ručně. Sestavení manuálu spustí manual/tools/import-ui-demo.py, který
si vezme obsah ui-demo/ přímo ze šablony a cestou z něj odstraní všechno, co by
se stahovalo z internetu:
| V šabloně (živě) | V manuálu (po importu) |
|---|---|
| Bootstrap z jsDelivr | kopie z node_modules — verze, proti které se šablona opravdu sestavuje |
| Font Awesome z cdnjs | kopie z node_modules |
| fonty z Google | stažené woff2 + vlastní @font-face |
../assets/css/style.css (živé CSS) |
snímek CSS šablony |
| zástupné obrázky z picsum, unsplash… | vygenerovaná SVG ve stejném rozměru |
| slupka dema (vlastní hlavička a levé menu) | zahozena — nahrazuje ji menu manuálu |
Proč to takhle
Manuál má fungovat i po stažení do složky a otevření dvojklikem bez připojení k internetu. Kdyby si katalog tahal styly z CDN, vypadal by po stažení rozbitě — a na vývojářském stroji, který na internetu je, by si toho nikdo nevšiml. Import proto na konci kontroluje, že v naimportovaném obsahu nezbyl žádný odkaz ven, a když najde, sestavení skončí chybou.
Skupina „Stránky“ se do manuálu nebere
Nebyla to komponenta, ale celá ukázková stránka. V katalogu součástek nemá co dělat; kdo hledá, jak se skládá celá stránka, patří do kapitoly Dělení šablony na Latte soubory.
Jediná výjimka: mapa
Google Maps se z podstaty načítají z internetu, takže stránka Google Maps ukáže offline prázdný rámeček. Všechno ostatní funguje bez sítě.
Při práci na CSS používejte živou verzi
Katalog v manuálu je snímek k času sestavení. Kdo právě upravuje styly, ať si
otevře ui-demo/ přímo v šabloně — mění se okamžitě a nic se pro ni nesestavuje.