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

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

Utilities v Boostrapu

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, zejména barvy a zarovnání textu. Bootstrap poskytuje následující utility. Ty, o kterých 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 necháme na příště, jelikož se jedná o obsáhlé téma. Zbytek utilit si dnes probereme.

Display

Display utilities umožňují rychle měnit hodnotu CSS vlastnosti display. Dají se tak rychle například 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}-{value} pro velikost sm, md, lg, xl a xxl.

Kde 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 break pointů, které jsme probírali v lekci Bootstrap - Typografie můžeme tedy 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 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. 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říklad navigací:

<a class="visually-hidden visually-hidden-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ů v lekci "Bootstrap - Carousely a Progress ":html-css/bootstrap/bo­otstrap-carousely-a-progress.

Pro šířku máme 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

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

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 konec 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í 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ýkoliv prvek, například <iframe>, 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 utilities, se budeme věnovat flex utilities, které slouží k jednoduchému zarovnání čehokoli kamkoli