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 její šablony a ukázali, kde je najít zdarma.
Během tohoto online kurzu si stručně popíšeme jednotlivé části frameworku Bootstrap, abyste získali přehled v čem všem vám může pomoci a jak se dané styly používají. Uvidíte, že toho nabízí opravdu mnoho.
Reboot
Začněme hezky od podlahy. Již jsme hovořili o tom, že HTML má nějaké základní styly. Ty nejsou z historických důvodů vždy úplně chytře nastavené a také se může stát, že budou v různých prohlížečích nastavené různě nebo že bude jejich používání neefektivní. Bootstrap obsahuje tzv. Reboot, což je kód definující výchozí styly. Reboot je postavený na projektu Normalize, který si klade za cíl nastavit optimální výchozí styly, aby byla tvorba designu co nejjednodušší. Někdy se tomuto nastavení obecně říká i CSS reset. Reboot upravuje přímo výchozí styl elementů bez nutnosti přidat k nim jakékoli třídy a to následujícím způsobem:
Box sizing
Vlastnost box-sizing je globálně nastavena na hodnotu
border-box, čímž se velikost elementů vždy počítá jako
celková velikost i s rámečkem a paddingem. Jistě znáte z boxmodelu.
Takovéto zadávání je mnohem intuitivnější a umožňuje používat i
procenta, protože např. `width: 50%; zabere opravdu polovinu stránky i když
má element rámeček a vnitřní okraj. Pokud o tomto nevíte, práce s
Bootstrapem by vás mohla značně překvapit.
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, třeba že špatně vidí, nebo že 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ůžete si zkusit nastavit
elementu <html> jinou velikost písma a uvidíte, 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
<body> se nastavuje výchozí font-family,
line-height, text-align a
background-color.
Font stack
V posledních letech si Apple, Microsoft a Google vytvořily pěkné fonty a používají je jako výchozí na svých zařízeních. Proč je nepoužívat i na webu, když jsou k dispozici? Bootstrap definuje tzv. "Native font stack", kde jsou tyto fonty vyjmenované a jeden z nich se na některém systému vždy najde. Jsou to fonty San Francisco (Apple), Segoe UI (Windows) a Roboto (Google Android). Další systémy spadnou na "Helvetica Neue", Arial a sans-serif. Podporovány jsou také Emoji fonty "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol". Můžete tedy vkládat barevné emoji do vašich textů, aniž byste cokoli linkovali.
Svislé okraje
Bootstrap doporučuje u elementů nezadávat oba svislé okraje
(margin-top a margin-bottom), protože splývají
dohromady a nikdy nevíte jak velká mezera mezi dvěma elementy ve skutečnosti
bude. To je další konvence, kterou byste měli dodržovat, tedy zadávat pouze
margin-bottom. Bootstrap toto nastaví např. pro všechny nadpisy
<h1> až <h6>, kterým odstraní
margin-top.
To samé platí i pro odstavce <p> a 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 mají border-style nastavený na collapse,
upravené vykreslování <caption> a unifikovaný
text-align.
Formuláře
<fieldset> elementy nemají rámeček ani okraje, aby
mohly sloužit jen jako wrappery, <legend> je ostylovaný
jako nadpis, <labely> jsou inline bloky, aby mohly mít
okraje. Normalizovány jsou i další elementy jako <input> ,
<select>, <textarea> a
<button>. Pokud jste 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íte 
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íva a byl přidán
margin-bottom). Jednotlivé řádky adresy bychom měli oddělovat
pomocí <br>. <blockquote> má opět
dolní margin, <abbr> získal tečkované podtržení.
Možná znáte atribut hidden z HTML 5, který 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 odchycení nechtěných dvojkliků v
Internet Exploreru a Edge.
V příští lekci, Bootstrap - Typografie, se budeme zabývat typografií.
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.