Lekce 2 - Bootstrap - Reboot
V minulé lekci, Úvod do CSS frameworku Bootstrap, jsme si vysvětlili, proč bychom měli frameworky používat, představili jsme si šablony a ukázali si, kde je najít zdarma.
V tomto Bootstrap tutoriálu si stručně popíšeme základní a neoddělitelnou součást stylování frameworku Bootstrap nazvanou Reboot. Získáme tak přehled o tom, v čem všem nám může framework pomoci a jak se dané styly používají.
Normalizace stylů v Bootstrapu
Pro efektivní práci s frameworkem je důležité pochopit koncepty a styly, na kterých je založen. Důležitost klíčových konceptů, které Bootstrap používá, jako jsou responzivní design, mobilní přístupnost, databáze komponentů a CSS stylů, možnost customizace a snadné použití, jsme si již vysvětlili. Nyní se zaměříme na klíčovou součást Bootstrapu, která je k jeho fungování nezbytná. Jde o normalizaci stylování prostřednictvím Rebootu. Díky němu v Bootstrapu unifikujeme principy box modelu, typografie, používání okrajů a také způsoby, jimiž Bootstrap upravuje a zjednodušuje styling tabulek, formulářů a dalších HTML elementů.
Reboot
Reboot je sada základních CSS pravidel, která zajišťuje, že všechny webové stránky vypadají konzistentně napříč různými webovými prohlížeči. Reboot zjednodušuje vývojářům práci tím, že eliminuje potřebu psát cross-browser kompatibilní kód pro základní elementy. Kromě vizuální konzistence Reboot umožňuje to, že jsou webové stránky nejen vizuálně přitažlivé, ale také funkční a přístupné pro všechny uživatele. Někdy se tomuto nastavení obecně říká CSS reset. Reboot upravuje přímo výchozí styl elementů bez nutnosti přidat k nim jakékoli třídy. Nyní si vysvětlíme potřebné principy Rebootu pro naši další práci s Bootstrapem.
Box sizing
Vlastnost box-sizing, která určuje, jak prohlížeče
vypočítávají celkovou šířku a výšku elementů, určitě známe z box
modelu. Je totiž klíčová pro správné fungování layoutů ve webovém
designu. V Bootstrapu je vlastnost box-sizing globálně nastavená
na hodnotu border-box, čímž se velikost elementů vždy
počítá jako celková velikost i s rámečkem a paddingem. Takovéto
zadávání je mnohem intuitivnější a umožňuje používat i procenta,
protože například width: 50%; zabere opravdu polovinu stránky,
přestože má element rámeček a vnitřní okraj:
Jednotky rem
Font v <body> je nastaven na 1rem. Jednotka
rem je preferována a označuje relativní velikost k velikosti
písmene M kořenového elementu stránky
<html>. Tuto velikost Bootstrap neupravuje, ale definuje
podle ní všechny další rozměry. Když si uživatel nastaví větší
písmo, protože např. špatně vidí nebo používá mobilní zařízení,
všechna písma používající jednotku rem se přeškálují
také a škálovat se budou např. i marginy. Můžeme si zkusit nastavit
elementu <html> jinou velikost písma a uvidíme, jak se
přeškáluje i grid a další součásti Bootstrapu. U vlastních stylů je
dobré tyto konvence také dodržovat.
Styly pro body
Základní styly, které se aplikují na <body>, jsou
font-family, font-size, line-height,
text-align a background-color. V rámci používání
těchto základních stylů se často setkáme také s předdefinovanou
sadou písem (tzv. font stack) pro různé webové stránky.
Font stack
V posledních letech si Apple, Microsoft a Google vytvořily vlastní moderní fonty, které dnes používají jako výchozí na svých zařízeních. Proč je tedy nevyužít i na webu, když jsou k dispozici? Bootstrap definuje tzv. "Native font stack", který tyto fonty uvádí, což zaručuje, že se na každém systému použije některý z nich. Konkrétně jde o fonty San Francisco (Apple), Segoe UI (Windows) a Roboto (Google Android). Na ostatních systémech se pak použijí fonty Helvetica Neue, Arial a sans-serif. Podporovány jsou také emoji fonty Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol. Můžeme tedy do našich textů vkládat barevné emoji, aniž bychom museli cokoli linkovat.
Okraje
V Bootstrapu je zvláštní pozornost věnována okrajům (margin) a
odsazením (padding), aby bylo zajištěno konzistentní a intuitivní chování
napříč různými prohlížeči. Reboot obvykle zahrnuje resetování
marginů i paddingů na elementech HTML, jako jsou
<body>, nadpisy <h1> až
<h6> a další. Tato pravidla pomáhají předcházet
nejednoznačnosti výsledného vertikálního prostoru mezi prvky, jelikož
okraje mohou splývat.
Bootstrap doporučuje u elementů nezadávat oba okraje
(margin-top a margin-bottom), protože splývají
dohromady a nikdy nevíme, jak velká mezera mezi dvěma elementy ve
skutečnosti bude. To je další konvence, kterou bychom měli dodržovat,
tedy zadávat pouze margin-bottom. Bootstrap pak
toto nastaví např. pro všechny nadpisy <h1> až
<h6>, kterým odstraní margin-top:
Totéž platí i pro seznamy <ul>,
<ol>, <dl>. Vnořené seznamy dokonce
nemají vůbec žádný margin. Položky definičního seznamu
<dd> mají levý margin 0 a spodní margin
0.5rem:
Tabulky
Tabulky jsou rovněž stylovány specifickými pravidly, která zajišťují
konzistentní a čistý vzhled. Tabulky mají definovaný
border-style na collapse. To znamená, že
rámečky mezi buňkami tabulky jsou sloučeny do jednoho tenčího
rámečku, nejsou tedy zobrazeny jako oddělené rámečky pro každou
buňku. Dále mají upravené vykreslování <caption> a
unifikovaný text-align, který zajišťuje, že text ve
všech buňkách tabulky je uniformně zarovnán, což zvyšuje
přehlednost a usnadňuje čtení dat v tabulce:
Formuláře
Elementy <fieldset> nemají rámeček ani okraje, aby
mohly sloužit jen jako wrappery. Element <legend> je
ostylovaný jako nadpis. Elementy <label>
jsou nastaveny jako inline bloky, což jim umožňuje mít
okraje. Normalizovány jsou i další elementy jako <input>,
<select>, <textarea> a
<button>. Pokud jsme někdy bojovali za stejnou velikost
elementu <select> v různých prohlížečích na různých
operačních systémech, jistě Reboot oceníme 
Všechny
<textarea> elementy lze roztahovat pouze na výšku, protože
roztahování na šířku často způsobí vytečení elementu ze stránky:
Další elementy
Velmi podobné změny jsou provedeny také v elementech
<address> (font není kurzívou a byl přidán
margin-bottom a line-height). Jednotlivé řádky
adresy bychom měli oddělovat pomocí <br>. Element
<blockquote> má opět dolní margin,
<abbr> získal tečkované podtržení. Atribut
hidden z HTML 5 slouží ke skrývání elementů. Bootstrap k jeho
stylu dodává ještě !important, aby nedošlo k jeho přepsání.
Ovšem pozor, tato technika není kompatibilní se skrýváním a odkrýváním
elementů pomocí jQuery. K tématu
viditelnosti se dostaneme dále v kurzu. Všem mobilním ovládacím prvkům je
nastaveno touch-action: manipulation pro ošetření nechtěných
dvojkliků v Internet Exploreru a Edge.
V příští lekci, Bootstrap - Typografie, se budeme zabývat typografií. Ukážeme si první třídy, kterými stylujeme nadpisy a podnadpisy, citace, zkratky a seznamy. Seznámíme se s utility třídami.
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.