Co jsou témata
Téma (Theme) je souborem prvků, které definují vzhled a chování webu v prohlížeči zákazníka.
Témata musí obsahovat
- settings.json pro nastavení, na kterých pozicích se mají renderovat základní prvky (patička, menu, drobečková navigace atd.)
Témata mohou obsahovat
- CSS (ačkoliv preferujeme LESS)
- LESS (automaticky se generují ze vstupního souboru less/screen.less
- Javascripty
- Obrázky (pro pozadí, ovládací prvky)
- Fonty
Jak začít
Nejprve je potřeba si založit účet na Bitbucketu (v plánu do budoucna i GitHub) a zde vytvořit nový GIT repozitář.
Repozitář doporučujeme nazavat "Webic Theme Název" nebo "Shopeca Theme Název" (dle systému, pro který je téma určeno)
Do repozitáře si můžete zkopírovat kód z našeho ukázkového tématu
Pro práci s GIT repozitáře doporučujeme použít nástroj SourceTree, který lze jednoduše propojit s vaším účtem na Bitbucketu.
Jak nahrát vaše téma na server
Nejprve je nutné zjistit, na kterém serveru poběží vaše prezentace, to vám rádi řekneme na info@shopeca.cz a současně vám pošleme přístupový klíč, který vložíte do nastavení vašeho repozitáře.
Následně pouze stačí v administraci webu spustit deploy tématu a během chvíle se váš web změní. Pro ověřené vývojáře nabízíme možnost i zřízení webhooku, kdy automaticky komunikuje Bitbucket s naším serverem a oznamuje mu, že je možné něco nového nasadit.
Doporučená struktura pro LESS
Z technického hlediska je jedno, jak budete mít LESS soubory strukturované, dokud bude vstupním bodem less/screen.less
Pro snazší orientaci v kódu doporučujeme LESS strukturovat do podaresářů:
- components - tématicky rozdělené komponenty (např. articles pro články, banners pro bannery atd.)
- layout - nastavení celkového vzhledu webu (hlavička, tělo, patička)
- typography - nastavení velikostí písem, nadpisů atd.
- pages - specifické nastavení pro určité speciální stránky (např. v případě, že má na jedné jediné stránce být jiný obrázek v hlavičce)
Na úrovni screen.less doporučujeme vytvořit soubor variables.less s proměnnými. Naše systémy umožňují pokročilou uživatelskou konfiguraci témat, která může umožnit správci obsahu měnit hodnoty těchto proměnných (a tím např. změnit odstín barvy na odkazech).
Jak jsme připravovali ukázkové téma
Přípravu ukázkového tématu jsme nahráli, aby byla vidět orientace v kódu a používání SourceTree.