Vektorové šablony

proč je používat a k čemu slouží

Vektorové šablony představují jednoduchý systém stylování popisků (widgetů) u produktů, kategorií a článků na blogu. Díky nim lze vytvořit různorodý a rozmanitý deisgn stránek pomocí CSS proměnných, které definují vzhled popisků.

V následujícím článku popíšeme jednoduché příklady, jak docílit změny rozestupů mezi widgety, změny velikosti nadpisů od H2 po H4, odstavců, odrážek a pod. Dále si vysvětlíme tzv. scope systém, díky kterému lze měnit vzhled konkrétního widgetu u konkrétním produktu, kategorii nebo článku.

Struktura widgetů 

Pro správné pochopení  vektorových šablon je nutné ukázat kód widgetů. Každý obsahuje HTML, které je nastylovaný BEM metodikou, zaručuje stabilní vzhled a předvídatelné chování. Nastavení vzhledu widgetů a jeho obsahu lze nastavit pomocí tzv. CSS proměnných, které vytváří a upravují v editoru kódu.

Před tím než si vytvoříme první design se přesvědčíme, že máme v nastavení režimu vzhledu zvolenou volbu "Generický systém stylování popisků". Dále v sekci "Vzhled" zvolte "Pobo original". 

V případě, že chceme změnit typografii nadpisů (h2, h3, h4) ve wysiwyg editoru, můžeme měnit vlastnosti jako je velikost, tučnost, barvu, výšku řádkování, typ fontu, vnější a vnitřní odsazení a v neposlední řadě využít (ve výchozím vypnuté) before pseudoelementy.

U nadpisů se nastavují tyto proměnné:

Pro úpravu nadpisů vytvoříme v sekci „Vzhled“ nový kód s názvem „Úprav typografie“ a vložíme do něj následující obsah:

Jak zjistit, které prvky lze upravovat pomocí proměnných

Nejrychlejší způsob je tzv. inspekce kódu, kdy stačí kliknout např. na odstavec pravým tlačítkem myší a z roletkového menu vybrat "Inspekce kódu" nebo "Prozkoumat" (v závislosti na operačním systému a prohlížeči). Následně se nám otevře panel, ve kterém je v levé části HTML popisku a pravé části seznam proměnných.

Proměnné začínající s prefixem --pobo-* lze je prokliknout a zjistit tak jejich výchozí hodnoty. Následně je lze upravit.

Všechny widgety mají ve výchozím nastavení následující maximální šířku, margin a padding:

Tyto hodnoty lze upravit podle potřeb, např. snížit padding a tím se zmenšit prostor prostor mezi widgety. Důležité je také zmínit to, že se aplikují pro všechny widgety,  nicméně existuje cesta, jak nastavit konkrétnímu widgetu konkrétní vlastnosti jako je pozadí, odsazení a pod.   

Existují situace, kdy je potřeba ovlivnit konkrétní widget konkrétního produktu, kategorie nebo článku blogu. Pro tyto účely jsme vytvořili tzv. scope systém, který umožňuje ovlivňovat vzhled konkrétní widgetu(resp. jeho ID). Ukážeme si nyní, jak invertovat widget s pásem ikon, který vidíte na této stránce.