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.
V tomto Bootstrap tutoriálu si stručně popíšeme základní a neoddělitelnou součást stylování frameworku Bootstrap nazvanou Reboot, abychom získali přehled v čem všem nám může framework pomoci a jak se dané styly používají.
Normalizace stylů v Bootstrapu
Pro využívání frameworku je důležité pochopit jeho koncepty a styly, které využívá. 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 pro 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, jakými 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, aby webové stránky byly 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á i CSS reset. Reboot upravuje přímo výchozí styl elementů bez nutnosti přidat k nim jakékoli třídy. Nyní 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 globálně nastavená vlastnost box-sizing
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,
i když 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, 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ůž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é se 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 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ůžeme tedy vkládat barevné emoji do vašich textů, aniž bychom cokoli linkovali.
Okraje
V Bootstrapu je zvláštní pozornost věnována okrajům (margins) 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ů a 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 toto tedy nastaví
např. pro všechny nadpisy <h1>
až <h6>
,
kterým odstraní margin-top
:
To samé 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, aby zajišťovaly
konzistentní a čistý vzhled. Mají definovaný border-style
na
collapse
, což znamená, že rámečky mezi buňkami
tabulky jsou sloučeny do jednoho tenčího rámečku. Namísto toho,
aby byly zobrazeny jako oddělené rámy 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íva a byl přidán
margin-bottom
a line-height
). Jednotlivé řádky
adresy bychom měli oddělovat pomocí <br>
.
<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 odchycení 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.