Lekce 17 - Bootstrap - Utilities

V předešlém cvičení, Řešené úlohy k 15.-16. lekci Bootstrap CSS frameworku, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Již víme, že CSS framework Bootstrap má kromě komponent ještě tzv. utilities a grid systém. Právě o utilitách bude dnešní lekce.

Utilities

Utilities jsou jednoúčelové CSS třídy, které se stanou vašimi oblíbenými pomocníky při každodenní práci. Některé základní utility jsme si již vysvětlili během popisu komponent, byly to zejména barvy a zarovnání textu. Bootstrap poskytuje celkem následující utility. Ty, o kterých jsme již mluvili, obsahují odkaz na příslušnou lekci.

• Borders
• Clearfix
• Close icon
• Text colors a pro Background colors
• Display
• Embed
• Flex
• Float
• Image replacement
• Position
• Screenreaders
• Sizing
• Spacing
• Text
• Vertical align
• Visibility

Flex utility si necháme na příště, jelikož jako jediný bude na delší povídání. Zbytek utilit si dnes probereme.

Display

Display utilities umožňují rychle měnit hodnotu CSS vlastnosti display. Dají se tak rychle např. přepnout obrázky na bloky, bloky na inline-bloky a podobně. Element poté můžeme použít tam, kde se očekává element jiného typu.

Máme připravené třídy:

• .d-none
• .d-inline
• .d-inline-block
• .d-block
• .d-table
• .d-table-cell
• .d-flex
• .d-inline-flex

Třídu jsme použili např. v lekci Carousely a Progress, kde se pomocí třídy .d-none skryly popisky carouselu.

Responzivní verze

Podle break pointů můžeme danou hodnotu pro vlastnost display nastavit až od určité velikosti displeje zařízení. To můžeme použít např. ke skrytí obsahu na mobilních zařízeních a jeho zobrazení na zařízeních větších. Ke každé výše uvedené třídě existují responzivní třídy pro každý breakpoint. Jsou to:

• .d-sm-none
• .d-sm-inline
• .d-sm-inline-block
• .d-sm-block
• .d-sm-table
• .d-sm-table-cell
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-none
• .d-md-inline
• .d-md-inline-block
• .d-md-block
• .d-md-table
• .d-md-table-cell
• .d-md-flex
• .d-md-inline-flex
• .d-lg-none
• .d-lg-inline
• .d-lg-inline-block
• .d-lg-block
• .d-lg-table
• .d-lg-table-cell
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-none
• .d-xl-inline
• .d-xl-inline-block
• .d-xl-block
• .d-xl-table
• .d-xl-table-cell
• .d-xl-flex
• .d-xl-inline-flex

Pokud použijeme např. třídu .d-md-block, bude element vykreslený jako blokový na středně velkých zařízeních a větších. Na menších zařízeních bude vykreslen výchozím způsobem.

Kombinace

Třídy spolu můžeme kombinovat k dosažení ideálního responzivního chování. Můžeme tak libovolně definovat intervaly, kdy budou elementy viditelné a kdy skryté. Elegantně se tím vyhneme ručnímu psaní media queries nebo dokonce vytváření několika verzí jedné stránky.

Uveďme si za vše dva příklady. Pokud bychom chtěli element skrytý jen na malých zařízeních, použili bychom třídy:

d-sm-none d-md-block

Element by byl viditelný na zařízeních "xs", na "sm" zařízeních by se skryl a od "md" zařízení by se opět objevil. "xs" je výchozí breakpoint, který neuvádíme, styl poté platí pro všechny breakpointy. Druhý příklad zobrazí element pouze na velkých zařízeních ("lg").

d-none d-lg-block d-xl-none

Embed

Snažili jste se již někdy vložit youtube video do vaší stránky? Asi jste zjistili, že video není responzivní a že když pro něj napíšete responzivní styl, je problém udržet stále stejný poměr stran daného elementu. Bootstrap v Embed utilities přichází s řešením právě tohoto problému.

Styly se aplikují na elementy <iframe>, <embed>, <video> a <object> nebo na elementy s třídou .embed-responsive-item, kterou Bootstrap doporučuje vždy uvádět. Rámeček okolo rámu bude automaticky vypnut.

Ukázka

K vložení responzivního youtube videa použijeme následující kód:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YlUKcNNmywk" allowfullscreen></iframe>
</div>

Živá ukázka:

Všimněte si wrapperu se třídami .embed-responsive a .embed-responsive-16by9. Druhá třída již podle názvu udává poměr stran videa. K poměrům můžeme použít tříd:

• .embed-responsive-21by9
• .embed-responsive-16by9
• .embed-responsive-4by3
• .embed-responsive-1by1

Image replacement

Image replacement je mikro utilita, která umožňuje skrýt nějaký text a nahradit jej obrázkem. Je reprezentována pouze třídou .text-hide, která slouží ke skrytí textu tak, aby pro vyhledávače zůstal viditelný. To je důležité např. u nadpisů <h1>, kde chceme mít na stránce obrázkové logo, ale zároveň bychom byli rádi, kdyby vyhledávače nadpis chápali i jako text.

<h1 class="text-hide" style="background-image: url('https://www.itnetwork.cz/images/5/css/bootstrap/bootstrap-stack.png'); width: 64px; height: 64px; background-size: 64px; background-repeat: no-repeat;">Twitter Bootstrap kurz</h1>

Výsledek:

Position

Pro změnu pozice elementu pomocí CSS vlastnosti position můžeme použít následujících předpřipravených tříd:

• .position-static - Výchozí pozice.
• .position-relative - Pozice posunutá relativně k původní pozici.
• .position-absolute - Pozice nastavená vůči oknu prohlížeče.
• .position-fixed - Pozice nastavená bez ohledu na pozici scrollbaru.
• .fixed-top - Element neroluje se stránkou, ale zůstává na pevné pozici a to na horním okraji stránky. Tuto funkci používá poměrně velké množství webů na navigační lištu a uživatelům umožňuje používat navigaci kdekoli na stránce, bez nutnosti rolovat kvůli ní nahoru.
• .fixed-bottom - Element neroluje se stránkou, ale zůstává na pevné pozici a to na dolním okraji stránky.
• .sticky-top - Funguje pouze v nových prohlížečích (Podpora pro CSS vlastnost a hodnotu position: sticky). Tehdy se element nechová nijak zvláštně, ale jakmile začneme scrollovat, přichytí se jako by byla jeho pozice fixní. Pokud bychom třídu použili opět na navigaci, výhodou je, že takto můžeme nad navigaci umístit např. velké logo, které se stránkou poté odscrolluje, zatímco navigace se k horní části obrazovky přilepí. Logo tedy na stránce nezabírá místo a navigace je stále při ruce.
• .position-sticky - Nová vlastnost umožňující přichytit element k oknu prohlížeče až ve chvíli, když by vyjel při scrollování mimo stránku. Jinak zůstává na svém místě.

Screenreaders

Povzbuzování k optimalizaci obsahu i pro hlasové čtečky nás provázelo celým kurzem. Již známe třídu .sr-only, kterou přiřazujeme typicky elementům <span> s dodatečným popisem pro hlasové čtečky, který by jinak z ostatního textu nemusel být zřejmý. Tyto elementy nejsou pro běžné prohlížeče viditelné. Třídu bychom mohli použít např. takto:

<span class="sr-only">Graf vývoje poptávky v roce 2018</span>

Pokud chceme, aby bylo možné element vybrat klávesnicí, přiřadíme mu ještě třídu .sr-only-focusable. Toho obvykle využíváme pro odkazy, které přeskočí hned k hlavnímu obsahu stránky a nenutí dotyčného se čtečkou prokousávat se např. navigací:

<a class="sr-only sr-only-focusable" >Přeskočit na hlavní obsah</a>

Sizing

Další mikroutilitka pro určování velikosti elementů v procentech. Již jsme se s ní setkali u progressbarů.

Pro šířku můžeme použít tříd:

• .w-25 - Šířka 25% rodičovského elementu.
• .w-50 - Šířka 50% rodičovského elementu.
• .w-75 - Šířka 75% rodičovského elementu.
• .w-100 - Šířka 100% rodičovského elementu.
• .mw-100 - Maximální šířka 100% rodičovského elementu (vlastnost max-width).

A pro výšku:

• .h-25 - Výška 25% rodičovského elementu.
• .h-50 - Výška 50% rodičovského elementu.
• .h-75 - Výška 75% rodičovského elementu.
• .h-100 - Výška 100% rodičovského elementu.
• .mh-100 - Maximální výška 100% rodičovského elementu (vlastnost max-height).

Ukázka

<div class="w-25 bg-success">25%</div><br />
<div class="w-50 bg-success">50%</div><br />
<div class="w-75 bg-success">75%</div><br />
<div class="w-100 bg-success">100%</div><br />

<div style="height: 150px">
    <div class="h-25 d-inline-block bg-warning">25%</div>
    <div class="h-50 d-inline-block bg-warning">50%</div>
    <div class="h-75 d-inline-block bg-warning">75%</div>
    <div class="h-100 d-inline-block bg-warning">100%</div>
</div>

Výsledek v prohlížeči:

Spacing

margin a padding můžeme našim elementům jednoduše nastavovat pomocí následujících utilit. To je velmi výhodné, jelikož čas od času někde potřebujeme nějakou tu mezírku a definovat stále nové a nové styly by bylo velmi frustrující.

Tříd je poměrně velké množství a jejich názvy se skládají z následujících částí:

{vlastnost}{strana}-{velikost}

Případně můžeme specifikovat i breakpoint, od kterého má daný okraj platit:

{vlastnost}{strana}-{breakpoint}-{velikost}

Konečná třída může být např. ml-2, která nastaví margin-left na 0.5rem.

Vlastnost

Zadáváme:

• m pro margin
• p pro padding

Strana

• t pro margin-top nebo padding-top
• b pro margin-bottom nebo padding-bottom
• l pro margin-left nebo padding-left
• r pro margin-right nebo padding-right
• x pro margin-left nebo padding-left a margin-right nebo padding-right
• y pro margin-top nebo padding-top a margin-bottom nebo padding-bottom
• nic pro margin nebo padding na všech čtyřech stranách daného elementu

Breakpoint

Breakpointy již dobře známe, jsou to:

• sm
• md
• lg
• xl

Velikost

Velikost zadáváme jako násobek proměnné $spacer, která má výchozí hodnotu 1rem:

• 0 - nastaví margin nebo padding na 0
• 1 - nastaví margin nebo padding na 0.25rem
• 2- nastaví margin nebo padding na 0.5rem
• 3- nastaví margin nebo padding na 1rem
• 4- nastaví margin nebo padding na 1.5rem
• 5- nastaví margin nebo padding na 3rem
• auto - nastaví margin na hodnotu auto, využíváme např. při centrování blokových elementů.

Pokud změníte hodnotu proměnné $spacer vlastním buildem Bootstrapu, změní se ve stejném poměru i výše uvedené hodnoty.

Vertical align

Utility slouží k svislému centrování. Zatím se ovšem neradujte, protože pouze nastavují hodnotu CSS vlastnosti vertical-align. Ta dokáže centrovat jen řádkové elementy, inline bloky nebo elementy tabulek. K tomu pravému svislému centrování se dostaneme až u flexu.

Ukázka

<p>
    <span class="align-baseline">baseline</span>
    <span class="align-top">top</span>
    <span class="align-middle">middle</span>
    <span class="align-bottom">bottom</span>
    <span class="align-text-top">text-top</span>
    <span class="align-text-bottom">text-bottom</span>
</p>

Výsledek:

Visibility

Jako poslední si představme utility třídy .visible a .invisible, které vnitřně mění hodnotu CSS vlastnosti visibility. Elementy budou tedy skryté, ale stále budou na stránce zabírat místo, jako by tam byly. Třídy nijak nepracují s CSS vlastností display.

V příští lekci, Bootstrap - Flex utilities, se budeme věnovat Flex utilities, které slouží k jednoduchému zarovnání čehokoli kamkoli