Design manuál DIV.cz
Design manuál definuje závazná pravidla pro vzhled a strukturu DIV.cz. Jeho cílem je udržet konzistentní rozhraní napříč filmy, seriály, knihami, hrami, metadatabází, komunitními částmi i interní dokumentací – bez ohledu na to, kdo a kdy danou stránku vytvořil.
Nová stránka nevytváří vlastní variantu existujícího prvku. Pokud už existuje definovaný způsob pro navigaci, kartu, formulář, tabulku, nadpis nebo responzivní chování, používá se tento vzor – a mění se jen modulová barva nebo obsah.
Podrobná pravidla a zdůvodnění najdeš v
templates/docs/_metodika.md. Tento manuál je jejich
praktická, prohlížitelná podoba – a zároveň první stránka, která
podle nich skutečně funguje.
Osm kapitol
-
Layout
Kontejner, maximální šířka a tři povolená rozložení stránky.
-
Navigace
Header, footer, breadcrumb, sekční navigace, levé menu a vyhledávání.
-
Komponenty
Karty, řádky, seznamy, tlačítka, badge, formuláře, tabulky, pagination.
-
Typografie
Nadpisy, odstavce, odkazy, seznamy, tabulky a základní text.
-
CSS
Struktura souborů, pořadí načítání a pravidla pro pojmenování tříd.
-
Responzivita
Jediný breakpoint 768px a princip stejných komponent na mobilu i desktopu.
-
Moduly
Filmová, seriálová, knižní a herní identita – barvy a jejich použití.
-
Příklady
Hotové HTML a CSS bloky připravené ke zkopírování.
Základní princip
Společné prvky DIV.cz mají být skutečně společné. Modulové CSS smí měnit barvu, konkrétní obsah nebo chování daného modulu, ale nesmí znovu definovat globální layout, navigaci nebo základní typografii.
Takto
general.css
layout.css
navigation.css
components.css
responsive.css
module_movies.css
Modul mění identitu barvou – ne anatomii komponenty. Karta filmu,
knihy i hry má stejné HTML, liší se jen třídou .module-*.
Jak manuál číst
Každá kapitola kombinuje krátké vysvětlení pravidla s živou ukázkou
komponenty a HTML/CSS kódem pod ní – stránka Příklady
obsahuje hotové bloky ke zkopírování bez dalšího hledání. Tato
stránka i zbytek design manuálu jsou sami postavené podle vlastních
pravidel: běží na docs/_base.html, novém CSS z
/web/css/v2/ a společných komponentách popsaných níže.
Závaznost manuálu
Tento manuál není jen inspirace. U nových a přepracovaných částí DIV.cz představuje výchozí standard. Pokud je potřeba pravidlo porušit, měla by mít odchylka konkrétní důvod – a pokud se stejná odchylka začne opakovat, patří nové pravidlo zpět do manuálu.