Přejít k obsahu | Přejít k hlavnímu menu | Přejít k vyhledávání

07 Jak přidávat vlastní komponenty

07.01 Základní informace

Kontext používání

Pro psaní CSS byl vybrán preprocesor SASS v kombinaci s mixinovou knihovnou Bourbon pro usnadnění práce.

CSS je inspirováno Atomic designem v kombinaci s BEM syntaxí. Od Atomic designu se odvíjí i základní adresářová struktura:

  1. atoms – základní stavební kameny frameworku. Jsou to nejmenší součásti frameworku, které jsou dále používány v molekulách a organismech. Typově jsou to např. jednotlivé formulářové prvky, štítky, typografie apod.
    1. forms - formulářové prvky (tlačítka, inputy, ...)
    2. icons - ikony FontAwesome
  2. molecules – skupiny atomů a speciální struktury HTML. V našem případě je dále dělíme na boxy, výpisy, formuláře a menu. Molekuly v HTML poznáme na první pohled, protože jsou prefixované klíčovými slovy box-, crossroad-, form- či menu-, které jsou dále k nalezení v odpovídajících složkách.
    1. box
    2. crossroad
    3. form
    4. menu
  3. organisms – větší části kódu, nejčastěji vznikají sloučením více různých molekul. V našem případě jsou organismy použity pro hlavičky a patičky.

Nezbytné minimum, než začnete pracovat s frameworkem

Výše vyjmenované věci jsou nezbytným minimem pro další následnou práci s frameworkem. Od zalostí těchto konceptů se odvíjí adresářová struktura, prefixování a pojmenování komponent, správné zařazení komponent. Tyto návaznosti je velmi důležité ctít, abychom udrželi v komponentách pořádek a framework byl stále funkční. Udřžitelnost je naše hlavní priorita.

Jak přidat vlastní komponentu

Prakticky jsou možné dva scénáře. Buď přidáváme zcela novou komponentu, nebo přidáváme modifikaci k již existující komponentě.

Přidání modifikace existující komponenty

Modifikace komponenty přidáváme typicky, když vznikne potřeba barevné varianty již existující komponenty. Modifikace komponent vznikají především v případě, kdy komponenta má stejné HTML, stejnou funkčnost, ale graficky se liší. Příkladem komponent s modifikacemi je například Hero box.

Přidání modifikace komponenty je jednoduché. Pokud bychom chtěli přidat modifikaci ke zmíněnému hero boxu, tak vezmeme její jméno ".box-hero" a přidáme do zápisu ".box-hero--transparent". Tento systém vychází z BEM metodiky popsané na stránce výše.

V CSS pak změny oproti původní komponentě stylujeme právě přes modifikační selektor ".box-hero--transparent".

V CSS mají vlastnosti také svůj řád, nejprve se zde nachází styly pro defaultní komponentu, další styly pro jednotlivé modifikace přidáváme pod, do komentáře označíme, že se jedná o varianty.

Přidání nové komponenty

Pokud vznikne potřeba úplně nové komponenty, tak postupujeme následujícím způsobem. Komponentu zařadíme do správné kategorie (atomy, molekuly, organismy), správně a výstižně ji pojmenujeme.

Každá komponenta je zdokumentovaná v MUNI frameworku. Nové komponentě tedy vytvoříme novou stránku, kterou nalinkujeme do rozcestníku. Komponentu je potřeba zdokumentovat, zároveň stránka souží pro ukázky HTML.

Nový soubor pro komponentu pojmenováme například jako "a-10-datum.php". Prefix "a" znamená "atomy", následuje číslo komponenty a název komponenty a přípona ".php". Stránky ukládáme ve složce "src/tpl".

Seznam základních přípon pro soubory:

  • "a" - atomy
  • "m" - molekuly
  • "o" - organismy
  • "f" - záležitosti frameworku

Založení CSS souboru

Nový soubor pro komponentu ukládáme do složky "src/css". Název souboru začíná podtržítkem, prefix komponenty vynecháváme, přípona souboru je pak ".scss".

Založení JS souboru

Pokud je pro komponentu potřeba také JavaScriptový soubor, tak nový soubor ukládáme do složky "src/js/components". Pojmenováváme opět dle komponenty, standardem je dodržovat název souboru v camel case stylu zápisu. Za názvem následuje přípona ".coffee".

JS komponenty samy o sobě fungovat nebudou, je potřeba je ještě nalinkovat do souboru "app.coffee".

Obecné pokyny pro psaní nových komponent

Psaní nových komponent pro MUNI framework má také další pravidla, cílem je hlavně udržení kvality kódu. Při psaní komponent dbáme na sémantickou správnost, používáme HTML5 značky, které pomáhají v orientaci v obsahu nejen např. vyhledávačům, ale především také lidem z různým postižením zraku - je pro nás důležitá přístupnost.

Každá komponenta je také responzivní, přizpůsobuje se různým rozlišením od mobilů, (minimum, pro které optimalizujeme, je 320px) až po desktop.

S tím také souvisí testování komponent - ty testujeme vizuálně na reálných rozlišeních od mobilů po různé desktopy. Potřeba je otestovat komponenty na různých typech prohlížečů. Testování - na reálných zařízeních, podporované prohlížeče. Standard pro desktopové prohlížeče naleznete zde.

Mezi základní typ testování patří také test validity HTML kódu, ten můžeme provést například přes online validátor.