2. diel - Bootstrap - Reboot
V minulej lekcii, Úvod do CSS frameworku Bootstrap , sme si vysvetlili, prečo by sme mali frameworky používať, predstavili sme si jej šablóny a ukázali, kde ich nájsť zadarmo.
V tomto Bootstrap tutoriále si stručne popíšeme základnú a neoddeliteľnú súčasť štylovania frameworku Bootstrap nazvanú Reboot, aby sme získali prehľad v čom všetkom nám môže framework pomôcť a ako sa dané štýly používajú.
Normalizácia štýlov v Bootstrape
Na využívanie frameworku je dôležité pochopiť jeho koncepty a štýly, ktoré využíva. Dôležitosť kľúčových konceptov, ktoré Bootstrap používa, ako sú responzívny dizajn, mobilná prístupnosť, databázy komponentov a CSS štýlov, možnosť customizácie a jednoduché použitie, sme si už vysvetlili. Teraz sa zameriame na kľúčovú súčasť Bootstrapu, ktorá je pre jeho fungovanie nevyhnutná. Ide o normalizáciu štylovania prostredníctvom Rebootu. Vďaka nemu v Bootstrape unifikujeme princípy box modelu, typografie, používanie okrajov a tiež spôsoby, akými Bootstrap upravuje a zjednodušuje styling tabuliek, formulárov a ďalších HTML elementov.
Reboot
Reboot je sada základných CSS pravidiel, ktorá zaisťuje , že všetky webové stránky vyzerajú konzistentne naprieč rôznymi webovými prehliadačmi. Reboot zjednodušuje vývojárom prácu tým, že eliminuje potrebu písať cross-browser kompatibilný kód pre základné elementy. Okrem vizuálnej konzistencie, Reboot umožňuje, aby webové stránky boli nielen vizuálne príťažlivé, ale aj funkčné a prístupné pre všetkých užívateľov. Niekedy sa tomuto nastaveniu všeobecne hovorí aj CSS reset. Reboot upravuje priamo predvolený štýl elementov bez nutnosti pridať k nim akejkoľvek triedy. Teraz vysvetlíme potrebné princípy Rebootu pre našu ďalšiu prácu s Bootstrapom.
Box sizing
Vlastnosť box-sizing, ktorá určuje, ako prehliadače
vypočítavajú celkovú šírku a výšku elementov, určite poznáme z box
modelu. Je totiž kľúčová pre správne fungovanie layoutov vo webovom
designe. V Bootstrape je globálne nastavená vlastnosť box-sizing
na hodnotu border-box, čím sa veľkosť elementov vždy
počíta ako celková veľkosť aj s rámčekom a paddingom. Takéto
zadávanie je oveľa intuitívnejšie a umožňuje používať aj percentá,
pretože napríklad width: 50%; zaberie naozaj polovicu stránky,
aj keď má element rámček a vnútorný okraj:
Jednotky rem
Font v <body> je nastavený na 1rem. Jednotka
rem je preferovaná a označuje relatívnu veľkosť k veľkosti
písmena M koreňového elementu stránky
<html>. Túto veľkosť Bootstrap neupravuje, ale definuje
podľa nej všetky ďalšie rozmery. Keď si užívateľ nastaví väčšie
písmo, napríklad že zle vidí, alebo že používa mobilné zariadenie,
všetky písma používajúce jednotku rem sa preškálujú tiež a
škálovať sa budú napr. aj marginy. Môžeme si skúsiť nastaviť elementu
<html> inú veľkosť písma a uvidíme, ako sa preškáluje
aj grid a ďalšie súčasti Bootstrapu. Pri vlastných štýloch je dobré
tieto konvencie tiež dodržiavať.
Štýly pre body
Základné štýly, ktoré sa aplikujú na <body> sú
font-family, font-size, line-height,
text-align a background-color. V rámci používania
týchto základných štýlov sa často stretávame aj s preddefinovanou
sadou písiem (tzv. font stack) pre rôzne webové stránky.
Font stack
V posledných rokoch si Apple, Microsoft a Google vytvorili pekné fonty a používajú ich ako predvolené na svojich zariadeniach. Prečo ich nepoužívať aj na webe, keď sú k dispozícii? Bootstrap definuje tzv. „Native font stack“, kde sú tieto fonty vymenované a jeden z nich sa na niektorom systéme vždy nájde. Sú to fonty San Francisco (Apple), Segoe UI (Windows) a Roboto (Google Android). Ďalšie systémy spadnú na Helvetica Neue, Arial a sans-serif. Podporované sú aj Emoji fonty Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol. Môžeme teda vkladať farebné emoji do vašich textov bez toho, aby sme čokoľvek linkovali.
Okraje
V Bootstrape je zvláštna pozornosť venovaná okrajom (margins) a
odsadeniam (padding), aby bolo zaistené konzistentné a intuitívne správanie
naprieč rôznymi prehliadačmi. Reboot obvykle zahŕňa resetovanie
marginov a paddingov na elementoch HTML, ako sú
<body>, nadpisy <h1> až
<h6> a ďalšie. Tieto pravidlá pomáhajú predchádzať
nejednoznačnosti výsledného vertikálneho priestoru medzi prvkami, pretože
okraje môžu splývať.
Bootstrap odporúča u elementov nezadávať oba okraje
(margin-top a margin-bottom), pretože splývajú
dohromady a nikdy nevieme aká veľká medzera medzi dvoma elementmi v
skutočnosti bude. To je ďalšia konvencia, ktorú by sme mali dodržiavať,
teda zadávať iba margin-bottom. Bootstrap toto
teda nastaví napr. pre všetky nadpisy <h1> až
<h6>, ktorým odstráni margin-top:
To isté platí aj pre zoznamy <ul>,
<ol>, <dl>. Vnorené zoznamy dokonca
nemajú vôbec žiadny margin. Položky definičného zoznamu
<dd> majú ľavý margin 0 a spodný margin
0.5rem:
Tabuľky
Tabuľky sú tiež štylované špecifickými pravidlami, aby zabezpečovali
konzistentný a čistý vzhľad. Majú definovaný border-style na
collapse, čo znamená, že rámčeky medzi bunkami
tabuľky sú zlúčené do jedného tenšieho rámčeka. Namiesto toho,
aby boli zobrazené ako oddelené rámy pre každú bunku. Ďalej majú
upravené vykresľovanie <caption> a unifikovaný
text-align, ktorý zaisťuje, že text vo všetkých
bunkách tabuľky je uniformne zarovnaný, čo zvyšuje prehľadnosť a
uľahčuje čítanie dát v tabuľke:
Formuláre
Elementy <fieldset> nemajú rámček ani okraje, aby mohli
slúžiť len ako wrappery. Element <legend> je ostylovaný
ako nadpis. Elementy <label> sú nastavené
ako inline bloky, čo im umožňuje mať okraje. Normalizované
sú aj ďalšie elementy ako <input>,
<select>, <textarea> a
<button>. Pokiaľ sme niekedy bojovali za rovnakú veľkosť
elementu <select> v rôznych prehliadačoch na rôznych
operačných systémoch, iste Reboot oceníme:) Všetky
<textarea> elementy je možné rozťahovať iba na výšku,
pretože rozťahovanie na šírku často spôsobí vytečenie elementu zo
stránky:
Ďalšie elementy
Veľmi podobné zmeny sú vykonané aj v elementoch
<address> (font nie je kurzíva a bol pridaný
margin-bottom a line-height). Jednotlivé riadky
adresy by sme mali oddeľovať pomocou <br>.
<blockquote> má opäť dolný margin,
<abbr> získal bodkované podčiarknutie. Atribút
hidden z HTML 5 slúži na skrývanie elementov. Bootstrap k jeho
štýlu dodáva ešte !important, aby nedošlo k jeho prepísaniu.
Avšak pozor, táto technika nie je kompatibilná so skrývaním a odkrývaním
elementov pomocou jQuery. K téme
viditeľnosti sa dostaneme ďalej v kurze. Všetkým mobilným ovládacím
prvkom je nastavené touch-action: manipulation na odchytenie
nechcených dvojklikov v Internet Exploreri a Edge.
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.