2. diel - Bootstrap - Reboot
V minulej lekcii, Úvod do CSS frameworku Bootstrap , sme si vysvetlili prečo je dobré používať CSS framework a vyskúšali si editovať jednu z šablón CSS frameworku Bootstrap. Počas online kurzu si stručne popíšeme jednotlivé časti tohto frameworku, aby ste získali prehľad v čom všetkom vám môže pomôcť a ako sa dané štýly používajú. Uvidíte, že toho ponúka naozaj veľa.
Reboot
Začnime pekne od podlahy. Už sme hovorili o tom, že HTML má nejaké základné štýly. Tie nie sú z historických dôvodov vždy úplne chytro nastavené a tiež sa môže stať, že budú v rôznych prehliadačoch nastavenej rôzne alebo že bude ich používanie neefektívne. Bootstrap obsahuje tzv. Reboot, čo je kód definujúce predvolené štýly. Reboot je postavený na projekte Normalize, ktorý si kladie za cieľ nastaviť optimálnu východiskovú štýly, aby bola tvorba dizajnu čo najjednoduchšie. Niekedy sa tomuto nastavenia všeobecne hovorí aj CSS reset. Reboot upravuje priamo predvolený štýl elementov bez nutnosti pridať k nim akejkoľvek triedy a to nasledujúcim spôsobom:
Box sizing
Vlastnosť box-sizing
je globálne nastavená na hodnotu
border-box
, čím sa veľkosť elementov vždy počíta ako
celková veľkosť aj s rámčekom a padding. Iste poznáte z boxového modelu.
Takéto zadávanie je oveľa intuitívnejšie a umožňuje používať aj
percenta, pretože napr. `Width: 50%; zaberie naozaj polovicu stránky aj keď
má element rámček a vnútorný okraj. Pokiaľ o tomto neviete, práca
bootstrappingom by vás mohla značne prekvapiť.
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 používateľ nastaví väčšie
písmo, napríklad že zle vidí, alebo že používa mobilné zariadenie,
všetky písma používajúci jednotku rem
sa přeškálují tiež
a škálovať sa budú napr. Aj marginy. Môžete si skúsiť nastaviť elementu
<html>
inú veľkosť písma a uvidíte, ako sa přeškáluje
aj grid a ďalšie súčasti Bootstrap. U vlastných štýlov je dobré tieto
konvencie tiež dodržiavať.
Štýly pre body
<body>
sa nastavuje východiskový
font-family
, line-height
, text-align
a
background-color
.
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 je 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), Sego UI (Windows) a Roboto (Google Android). Ďalšie systémy spadnú na "Helvetica Neue", Arial a sans-serif. Podporované sú tiež Emoji fonty "Apple Color Emoji", "Sego UI Emoji", "Sego UI Symbol". Môžete teda vkladať farebné emoji do vašich textov, bez toho aby ste čokoľvek linkovali.
Zvislé okraje
Bootstrap odporúča u elementov nezadávať oba zvislé okraje
(margin-top
a margin-bottom
), pretože splývajú
dohromady a nikdy neviete aká veľká medzera medzi dvoma elementmi v
skutočnosti bude. To je ďalšia konvencie, ktorú by ste mali dodržiavať,
teda zadávať iba margin-bottom
. Bootstrap toto nastaví napr. Pre
všetky nadpisy <h1>
až <h6>
, ktorým
odstráni margin-top
.
To isté platí aj pre odseky <p>
a 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 majú border-style
nastavený na collapse
,
upravené vykresľovanie <caption>
a unifikovaný
text-align
.
Formuláre
<fieldset>
elementy nemajú rámček ani okraje, aby mohli
slúžiť len ako wrappery, <legend>
je ostylovaný ako
nadpis, <labely>
sú inline bloky, aby mohli mať okraje.
Normalizované sú aj ďalšie elementy ako <input>
,
<select>
, <textarea>
a
<button>
. Ak ste niekedy bojovali za rovnakú veľkosť
elementu <select>
v rôznych prehliadačoch na rôznych
operačných systémoch, iste Reboot oceníte Všetky
<textarea>
elementy možno rozťahovať iba na výšku,
pretože rozťahovanie na šírku často spôsobí vytečeniu elementu zo
stránky.
Ďalšie elementy
Veľmi podobné zmeny sú vykonané tiež v elementoch
<address>
(font nie je kurzíva a bol pridaný
margin-bottom
). Jednotlivé riadky adresy by sme mali oddeľovať
pomocou <br>
. <blockquote>
má opäť
dolná margin, <abbr>
získal bodkované podčiarknutie.
Možno poznáte atribút hidden
z HTML 5, ktorý slúži na
skrývanie elementov. Bootstrap k jeho štýlu dodáva ešte
!important
, aby nedošlo k jeho prepísanie. 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
pre odchytenie nechcených dvojklik v
Internet Exploreri a Edge.
V budúcej lekcii, Bootstrap - Typografia , sa budeme zaoberať typografiou.