Struktura SCSS#

Jak jsou styly rozdělené, v jakém pořadí se skládají a kam sáhnout, když děláte novou šablonu. Kořen: www/themes/<větev>/<šablona>/desktop/assets/scss/.

Vstupní bod a pořadí#

Všechno začíná v style.scss. Pořadí importů je závazné — určuje, kdo koho přebíjí:

@use "utilities";      // celý Bootstrap, self-hosted
@use "abstracts" as *; // tokeny, funkce, mixiny — negeneruje ŽÁDNÉ CSS
@use "base";           // reset, obecné styly, utility třídy
@use "components";     // UI komponenty systému
@use "layout";         // header, footer, main, parts, sections
@use "modules";        // styly Nette komponent, dělené po modulech
@use "custom";         // ← JEDINÉ místo pro odchylky téhle šablony

Vrstva	Co v ní je	Sahat?
`utilities/`	Bootstrap ze `node_modules`	ne
`abstracts/`	tokeny, funkce, mixiny (nevygeneruje ani řádek CSS)	jen hodnoty tokenů
`base/`	reset, typografie, skiny, utility třídy	ne
`components/`	tlačítka, karty, formuláře… — společný design systém	ne
`layout/`	strukturální části stránky	ne
`modules/`	styly Nette komponent po modulech	ne
`custom/`	odchylky konkrétní šablony	ano, výhradně sem

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á — a přijde se na to až tehdy, když se rozbije úplně jiná šablona.

Bootstrap: používají ho OBĚ větve, ale jinak#

Front Bootstrap používá — celý

Rozšířený omyl. Šablony frontu na jeho komponentách přímo stojí: modal ve čtyřiceti šablonách, collapse a toast po dvaceti, dropdown a offcanvas po patnácti, carousel v devíti. Proto se veze celý balík, ne podmnožina.

	Front	Administrace
Odkud	`utilities/_bootstrap.scss` → `node_modules`	webpack → `assets/dist/styles.css`
Co	celý Bootstrap	celý Bootstrap
Kdy se načte	první, před tématem	před `style.css` (linkuje `_head.latte`)
Proč tak	Bootstrap je podklad, téma ho přebíjí	admin má vlastní komponenty; utility s `!important` mají vyhrát

V administraci je @use \"utilities\" ZÁMĚRNĚ zakomentované

Přidávalo grid a utility API podruhé na konec. Změřeno, ne odhadnuto: po odstranění je style.css o 79 857 B menší a všech 58 admin stránek je pixelově identických. Nevracet zpět s odůvodněním „kvůli kaskádě“ — utility mají !important, takže vyhrají i z první kopie.

Odkaz na CDN nevracet ani v jedné větvi

Bez připojení k internetu by se rozsypal vzhled a verze na CDN se mění pod rukama. Jeden zdroj (node_modules), jedna verze pro obě větve.

Vlastní display může Bootstrap přebít

Pravidlo se stejnou specificitou vyhraje podle pořadí. Řešte to rozsahem (vnořením do vlastní třídy), ne !important.

Tokeny#

Dvě úrovně a každá má svou roli:

Úroveň	Kde	K čemu
Základní	`abstracts/_vars.scss`	paleta, typografie, rozestupy, poloměry, stíny, z-index
Komponentní	u komponenty samotné	„lokální API“ komponenty — co na ní jde měnit zvenčí

// components/_cards.scss — token je rozhraní komponenty
.card {
  --card-bg: var(--color-surface);
  --card-radius: var(--border-radius);

  background: var(--card-bg);
  border-radius: var(--card-radius);
}

Nikdy nepiš hodnotu přímo do komponenty

#2ecc8a v komponentě znamená, že se nová šablona nepřebarví změnou tokenu. Hodnota patří do tokenu, komponenta sahá na token.

Komponentní token patří do rozsahu komponenty

Ne do :root. Pak je z kódu vidět, co komponenta nabízí — a šablona to umí přepsat, aniž by hnula ostatními.

Hodnoty komponentních tokenů odkazují na základní

--card-bg: var(--color-surface), ne konkrétní barva. Jinak se paleta přebarví jen zpola.

Nová šablona krok za krokem#

Zkopírovat kostru ze template1 — celý assets/scss/, layouts/, assets/js/.
Přepsat custom/_vars-override.scss — jen tokeny, které se liší od systémového výchozího stavu (primární barva s celou škálou 100–900, písmo, poloměr, rozestupy sekcí).
Sekce do custom/sections/ — hlavička, hero, patička; vlastní vzhled šablony, ne přepisování layout/.
Stránkové odchylky do custom/pages/<modul>/ — když se jedna stránka chová jinak než zbytek.
Sestavit a projít katalog komponent — ukáže, co všechno se změnou tokenů pohnulo.

Nová šablona nemusí kopírovat komponenty

Přebere celý design systém a přepíše jen tokeny. Když se sáhne do components/, je to skoro vždy známka, že chybí token — a ten je lepší doplnit než komponentu rozkopírovat.

Sestavení#

sass scss/style.scss css/style.css --style=compressed --watch

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ě.

Bez sestavení se změna SCSS nikde neprojeví

Web čte css/style.css, ne zdroje. Chybějící sestavení vypadá jako „úprava nefunguje" a nikdo si ho nespojí s tím, že soubor jen nikdo nepřeložil.

Na co si dát pozor#

Starší komponenta nemusí mít v nové šabloně styly

Vypadá to jako rozbité vykreslení, ale chybí jen pravidla. Než začnete opravovat, zjistěte v katalogu, jestli komponenta v šabloně kdy stylovaná byla — jinak opravujete něco, co nikdy nefungovalo, a hledáte příčinu v nesprávném místě.

Třídy z návrhové sady nejsou třídy šablony

Návrhová sada a šablona mají jiné názvosloví. Zkopírovaný kus markupu z návrhu se v šabloně nenastyluje — a chybějící styl vypadá stejně jako chyba v kódu. Podrobněji Design systém.