Shrnutí základního layoutu

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

 

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*