Kódování modulů a komponent

Gridový systém

Informace o použití jednotlivých tříd

column, content, row - zapisovat zvlášt a vkládat obsah až dovnitř, aby byla zachována struktura. Nepoužíváme bootstrap třídy, používáme vlastní gridový systém společně s BEM zápisem. Nejdříve je vždy sekce a pod ní až její content. 

Hlavní je používat i trochu rozumu a logiky pro univerzálnost a neřešit pár pixelů rozdíl - pokud někde naměříme 12pixelů zhora a 11 zdola můžeme klidně dát padding: 10px 0; do 5 pixelů rozdílu to není poznat, a někdy to pro univerzálnost prvků ani nedává smysl.

V rámci BEMu používáme podtřžítka pouze pro rozdělení block__element, mezi jednotlivými slovy víceslovných tříd používáme pomlčku - main-header, gallery-grid, apod.

Takto ano

<section class="quote">
    <div class="quote__content --content">
        <div class="quote__row --row">
            <div class="quote__column --column --w-12 --w-l-5">
                <div class="quote__figure">
                    <img class="quote__shape" src="/img/citace_tvar.svg" alt="tvar">
                    <img class="quote__img" src="https://media.tehrantimes.com/d/t/2021/06/20/4/3808608.jpg" alt="citace">
                </div>
            </div>
        </div>
    </div>
</section>

Takto ne - sloupeček nemůže být ten obrázek, obrázek má být až ve sloupci. Zároveň chybí sekce, je potřeba mít nejdřív sekci a pak popřípadě třeba quote__content --content

<section class="quote --content">
        <div class="quote__row --row">
                <div class="quote__figure --column --w-12 --w-l-5">
                    <img class="quote__shape" src="/img/citace_tvar.svg" alt="tvar">
                    <img class="quote__img" src="https://media.tehrantimes.com/d/t/2021/06/20/4/3808608.jpg" alt="citace">
                </div>
        </div>
</section>

Správné použití CSS a hodnoty z Adobe XD

Základní pravidla BEM

Font-size - při kopírování hodnot z XD, je potřeba převézt u velikostí fontu z pixelů na hodnotu rem, 1 rem = 10px;

Line-height nedoporučuji kopírovat vůbec, line-height je nastavena globálně pro daný projekt v relativním faktoru - line-height: X.X (kde x je velikost řádku daného fontu). Pokud tedy někde výjimečně potřebuji nastavit line-height (například globálně u odstavců v úvodní sekci), napíšu například takto line-height: 1.5; 

Letter-spacing nedoporučuji kopírovat vůbec, letter-spacing je nastavena globálně pro daný projekt v em jednotkách (závislé na velikosti fontu) - letter-spacing: X.Xem (kde x je velikost fontu). Pokud tedy někde výjimečně potřebuji nastavit letter-spacing (například globálně u odstavců v úvodní sekci), napíšu například takto letter-spacing: 0.05em; 

Box-shadow se dá například snadno získat z Adobe XD - např. hodnoty xd jsou 0 3px 6px + nějaká barva box-shadow a teoreticky průhlednost (opacity). Výsledný box-shadow můžeme tedy zapsat takto - box-shadow: 0 3px 6px rgba(0,0,0,0.5); kde první tři hodnoty rgb jsou daná barva v rgb formátu a čtvrtá hodnota je alpha - průhlednost v hodnotě od 0 do 1 (0 = 100% průhedné);

Padding - vnitřní odsazení, započítává se do velikosti elementu a je jeho součástí. Můžeme používat jednotky px z adobe XD. Není potřeba řešit odchylky pár pixelů. Pokud je někde padding 12 pixelů, většinou stačí 10px;

Margin - vnější odsazení, nepočítá se do velikosti elementu a není jeho součástí.

Správné použití prvků

Tlačítka - tlačítka najdeme v souboru button.scss, pokud se nám tlačítka na webu opakují, není nutno stylovat víckrát ale přidat si například button--ghost, button--basket, apod. a používáme jednotné styly. 

Obrázky a ikonky - Odkaz na článek

Odkazy je potřeba dávat jako <a href="#" class="button button--brand">Text</a> například. Bez hrefu nám odkaz nebude fungovat ani v rámci css.

Jednotlivé moduly a komponenty

Header - Odkaz na článek

Footer - Odkaz na článek

Main-header - úvodní sekce webu. Většinou jsou všechny tyto sekce podobné, nebo prakticky stejné. Nevymýšlíme proto tedy nové moduly, použijeme třídu main-header a její modifikátory (main-header--color, main-header--image, main-header--homepage, atd. podle potřeby)

Blog - náhled blogu, specifikace - například article, article--image (varianta s obrázkem). Specifikace jako například datum, rubrika a doba čtení může být nový modul spec - viz queen-studio.cz

Obrázek v pozadí, text popřípadě i gradient v popředí - Odkaz na článek

Javascript a knihovny

Nepoužíváme Jquery ani Bootstrap.js, snažíme se jít cestou Vue.js, nebo čistý javascript - app.js, {block scripts} pro konkrétní šablonu

Odkaz na článek o knihovnách

Kompilace JS - odkaz na článek