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 ich š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ť štýlovania frameworku Bootstrap nazývanú 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ť koncepty a štýly, ktoré využíva. Dôležitosť kľúčových konceptov, ktoré Bootstrap používa, ako sú napríklad 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 štýlovania 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 súbor 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 boli webové stránky 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 pridania akejkoľvek triedy. Teraz si vysvetlíme princípy Rebootu potrebné pre ď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 dizajne. 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:

Boxmodel v CSS - Kompletný kurz CSS frameworku Bootstrap

Jednotky rem

Font v <body> je nastavený na 1rem. Preferujeme jednotku rem, ktorá 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 keď zle vidí alebo používa mobilné zariadenie, všetky písma používajúce jednotku rem sa tiež preškálujú a škálovať sa budú napr. aj marginy. Môžeme 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. Tieto konvencie je dobré dodržiavať aj pri vlastných štýloch.

Štýly na 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 preddefinovaným súborom 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 na svojich zariadeniach ich používajú ako predvolené. 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 používajú 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 textov bez toho, aby sme čokoľvek linkovali.

Okraje

V Bootstrape je zvláštna pozornosť venovaná okrajom (margins) a odsadeniam (padding), čo zaisťuje 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 to nastaví napr. pre všetky nadpisy <h1> až <h6>, ktorým odstráni margin-top:

Default Headings in Bootstrap

headings.html

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:

Default Lists in Bootstrap

lists.html

Tabuľky

Tabuľky sú tiež štýlované špecifickými pravidlami, ktoré zabezpečujú 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 je vo všetkých bunkách tabuľky uniformne zarovnaný, čo zvyšuje prehľadnosť a uľahčuje čítanie dát v danej tabuľke:

Default Tables in Bootstrap

tables.html

Formuláre

Elementy <fieldset> nemajú rámček ani okraje, aby mohli slúžiť len ako wrappery. Element <legend> je štýlovaný 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:

Default Forms in Bootstrap

forms.html

Ďalšie elementy

Veľmi podobné zmeny sú 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 v ďalšej časti kurzu. Všetky mobilné ovládacie prvky majú nastavené touch-action: manipulation na odchytenie nechcených dvojklikov v Internet Exploreri a Edge.

V ďalšej lekcii, Bootstrap - Typografia, sa budeme zaoberať typografiou. Ukážeme si prvé triedy, ktorými štýlujeme nadpisy a podnadpisy, citácie, skratky a zoznamy. Zoznámime sa s utility triedami.

Absolvované

Označiť lekciu ako neabsolvovanú