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
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
Kompilace JS - odkaz na článek