Lekce 17 - Bootstrap - Utility

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í.

V dnešním tutoriálu CSS frameworku Bootstrap si představíme utility a jednoho užitečného pomocníka pro vkládání videí z YouTube.

Utility v Bootstrapu

Utility 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, zejména barvy a zarovnání textu. Bootstrap poskytuje následující utility (ty, o nichž jsme již mluvili, obsahují odkaz na příslušnou lekci):

• Borders,
• Close icon,
• Text colors a pro Background colors,
• Display,
• Flex,
• Float,
• Image replacement,
• Position,
• Visually hidden,
• Sizing,
• Spacing,
• Text,
• Vertical align,
• Visibility.

Flex utility si ponecháme na příště, jelikož se jedná o obsáhlé téma. Zbytek utilit si dnes probereme.

Display

Display utility umožňují rychle měnit hodnotu CSS vlastnosti display. Dají se tak například rychle 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, které se jmenují podle svého formátu:

• d.-{hodnota} pro velikost xs,
• d.-{breakpoint}-{hodnota} pro velikost sm, md, lg, xl a xxl.

Hodnota je použita jedna z následujících:

• .none,
• .inline,
• .inline-block,
• .block,
• .grid,
• .table,
• .table-cell,
• .table-row,
• .flex,
• .inline-flex.

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

Responzivní verze podle breakpointů, které jsme probírali v lekci Bootstrap - Typografie, tedy můžeme nastavit až od určité velikosti displeje zařízení. To můžeme použít například 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,
• .d-xxl-none,
• .d-xxl-inline,
• .d-xxl-inline-block,
• .d-xxl-block,
• .d-xxl-table,
• .d-xxl-table-cell,
• .d-xxl-flex,
• .d-xxl-inline-flex.

Pokud použijeme například 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 tyto 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. Výchozí breakpoint xs 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

Position

Pro změnu pozice elementu pomocí CSS vlastnosti position máme k dispozici následující předpřipravené třídy. Nejsou však responzivní:

• .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,
• .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ě.

Visually hidden

Povzbuzování k optimalizaci obsahu i pro hlasové čtečky nás provázelo celým kurzem. Již známe třídu .visually-hidden, 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 použijeme například takto:

<span class="visually-hidden">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 .visually-hidden-focusable. To obvykle využíváme pro odkazy, které přeskočí hned k hlavnímu obsahu stránky a nenutí dotyčného uživatele čtečky se prokousávat například navigací:

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

Sizing

Další mikroutilita k určování velikosti elementů v procentech. Již jsme se s ní setkali u progress barů v lekci Bootstrap - Carousely a progress.

Pro šířku máme tyto třídy:

• .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).

Pojďme si to ukázat prakticky:

<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 class="mw-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 class="mh-100 d-inline-block bg-warning">100 %</div>
</div>

Výsledek v prohlížeči:

Třída mh-100 nastavuje maximální výšku, ale nezajistí, že element bude tuto výšku aktivně vyplňovat. Na rozdíl od toho třídy h-25, h-50, h-75 a h-100 skutečně nastavují výšku elementu na specifické procento rodičovské výšky.

Spacing

Hodnoty margin a padding našim elementům jednoduše nastavíme 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í. Pro breakpoint xs:

{vlastnost}{strana}-{velikost}

Pro další breakpointy pak jako:

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

Konečná třída bude např. ms-2, která nastaví margin-left na 0.5rem.

Vlastnost

Zadáváme:

• m pro margin,
• p pro padding.

Strana

Určujeme:

• t pro margin-top nebo padding-top,
• b pro margin-bottom nebo padding-bottom,
• s (jako start) pro margin-left nebo padding-left,
• e (jako end) 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,
• xxl.

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říklad při centrování blokových elementů.

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

Vertical align

Tyto utility slouží ke svislému centrování. Bohužel 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.

Pojďme si to ukázat:

<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.

Ratio

Na závěr utilit si přidáme ještě jednu nápomocnou věc pro vkládání videa z YouTube. Ta již není zařazena pod utilitami, ale je součástí skupiny Helpers pod názvem Ratio. Při vkládání YouTube videa do stránky můžeme narazit na problém s udržením stálého poměru stran. Zvláště pokud chceme, aby bylo video responzivní. I když pro něj napíšeme responzivní styl, je problém udržet stále stejný poměr stran daného elementu. V Bootstrapu 5 se tento problém řeší pomocí tříd .ratio-*.

Jakýkoli prvek, například <iframe>, tedy zabalíme do nadřazeného prvku s třídou .ratio a poměrem stran. Bezprostřední podřízený potomek je automaticky dimenzován díky našemu univerzálnímu selektoru .ratio > *.

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

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Varianty poměrů stran videa máme:

• ratio-1x1,
• ratio-4x3,
• ratio-16x9,
• ratio-21x9.

Živá ukázka:

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