17. diel - Bootstrap - Utilities

V predchádzajúcom cvičení, Riešené úlohy k 15.-16. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriáli CSS framewroku Bootstrap si predstavíme utility a jedného užitočného pomocníka na vkladanie videí z YouTube.

Utilities v Boostrape

Utilities sú jednoúčelové CSS triedy, ktoré sa stanú vašimi obľúbenými pomocníkmi pri každodennej práci. Niektoré základné utility sme si už vysvetlili počas popisu komponentov, najmä farby a zarovnania textu. Bootstrap poskytuje nasledujúce utility. Tie, o ktorých sme už hovorili, obsahujú odkaz na príslušnú lekciu:

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

Flex utility si necháme nabudúce, pretože sa jedná o obsiahlu tému. Zvyšok utilít si dnes preberieme.

Display

Display utilities umožňujú rýchlo meniť hodnotu CSS vlastnosti display. Dajú sa tak rýchlo napríklad prepnúť obrázky na bloky, bloky na inline-bloky a podobne. Element potom môžeme použiť tam, kde sa očakáva element iného typu.

Máme pripravené triedy, ktoré sa volajú podľa svojho formátu:

• d.-{value} pre veľkosť xs,
• d.-{breakpoint}-{value} pre veľkosť sm, md, lg, xl a xxl.

Kde hodnota je použitá jedna z nasledujúcich:

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

Triedu sme použili napríklad v lekcii Bootstrap - Carousely a Progress, kde sa pomocou triedy .d-none skryli popisky carouselu.

Responzívna verzia podľa breakpointov, ktoré sme preberali v lekcii Bootstrap - Typografie môžeme teda nastaviť až od určitej veľkosti displeja zariadenia. To môžeme použiť napríklad na skrytie obsahu na mobilných zariadeniach a jeho zobrazenie na zariadeniach väčších. Ku každej vyššie uvedenej triede existujú responzívne triedy pre každý breakpoint. Sú 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.

Pokiaľ použijeme napríklad triedu .d-md-block, bude element vykreslený ako blokový na stredne veľkých zariadeniach a väčších. Na menších zariadeniach bude vykreslený východiskovým spôsobom.

Kombinácia

Triedy spolu môžeme kombinovať na dosiahnutie ideálneho responzívneho správania. Môžeme tak ľubovoľne definovať intervaly, kedy budú elementy viditeľné a kedy skryté. Elegantne sa tým vyhneme ručnému písaniu media queries alebo dokonca vytváraniu niekoľkých verzií jednej stránky.

Uveďme si za všetko dva príklady. Pokiaľ by sme chceli element skrytý len na malých zariadeniach, použili by sme triedy:

d-sm-none d-md-block

Element by bol viditeľný na zariadeniach xs, na sm zariadeniach by sa skryl a od md zariadení by sa opäť objavil. Predvolený breakpoint xs neuvádzame, štýl potom platí pre všetky breakpointy. Druhý príklad zobrazí element iba na veľkých zariadeniach (lg):

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

Position

Pre zmenu pozície elementu pomocou CSS vlastnosti position máme k dispozícii nasledujúce predpripravené triedy. Nie sú však responzívne:

• .position-static - východisková pozícia,
• .position-relative - pozícia posunutá relatívne k pôvodnej pozícii,
• .position-absolute - pozícia nastavená voči oknu prehliadača,
• .position-fixed - pozícia nastavená bez ohľadu na pozíciu scrollbaru,
• .position-sticky - nová vlastnosť umožňujúca prichytiť element k oknu prehliadača až vo chvíli, keď by vyšiel pri zcrollovaní mimo stránku. Inak zostáva na svojom mieste.

Visually hidden

Povzbudzovanie k optimalizácii obsahu aj pre hlasové čítačky nás sprevádzalo celým kurzom. Už poznáme triedu .visually-hidden, ktorú priraďujeme typicky elementom <span> s dodatočným popisom pre hlasové čítačky, ktorý by inak z ostatného textu nemusel byť zrejmý. Tieto elementy nie sú pre bežné prehliadače viditeľné. Triedu použijeme napríklad takto:

<span class="visually-hidden">A demand overview in 2018</span>

Pokiaľ chceme, aby bolo možné element vybrať klávesnicou, priradíme mu ešte triedu .visually-hidden-focusable. To obvykle využívame pre odkazy, ktoré preskočia hneď k hlavnému obsahu stránky a nenútia dotyčného s čítačkou prehrýzť sa napríklad navigáciou:

<a class="visually-hidden visually-hidden-focusable" >Skip to the main content</a>

Sizing

Ďalšia mikroutilitka na určovanie veľkosti elementov v percentách. Už sme sa s ňou stretli pri progressbaroch v lekcii Bootstrap - Carousely a Progress.

Pre šírku máme triedy:

• .w-25 - šírka 25 % rodičovského elementu,
• .w-50 - šírka 50 % rodičovského elementu,
• .w-75 - šírka 75 % rodičovského elementu,
• .w-100 - šírka 100 % rodičovského elementu,
• .mw-100 - maximálna šírka 100% rodičovského elementu (vlastnosť max-width).

A pre 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álna výška 100% rodičovského elementu (vlastnosť max-height).

Poďme si to ukázať 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ýsledok v prehliadači:

Trieda mh-100 nastavuje maximálnu výšku, ale nezaistí, že element bude túto výšku aktívne vyplňovať. Na rozdiel od toho triedy h-25, h-50, h-75 a h-100 skutočne nastavujú výšku elementu na špecifické percento rodičovskej výšky.

Spacing

Hodnoty margin a padding našim elementom jednoducho nastavíme pomocou nasledujúcich utilít. To je veľmi výhodné, pretože čas od času niekde potrebujeme nejakú tú medzierku a definovať stále nové a nové štýly by bolo veľmi frustrujúce.

Tried je pomerne veľké množstvo a ich názvy sa skladajú z nasledujúcich častí. Pre breakpoint xs:

{property}{side}-{size}

Pre ďalšie breakpointy potom ako:

{property}{side}-{breakpoint}-{size}

Konečná trieda bude napr. ms-2, ktorá nastaví margin-left na 0.5rem.

Vlastnosť

Zadávame:

• m pre margin,
• p pre padding.

Strana

• t pre margin-top alebo padding-top,
• b pre margin-bottom alebo padding-bottom,
• s (ako štart) pre margin-left alebo padding-left,
• e (ako end) pre margin-right alebo padding-right,
• x pre margin-left alebo padding-left a margin-right alebo padding-right,
• y pre margin-top alebo padding-top a margin-bottom alebo padding-bottom,
• nič pre margin alebo padding na všetkých štyroch stranách daného elementu.

Breakpoint

Breakpointy už dobre poznáme, sú to:

• sm,
• md,
• lg,
• xl,
• xxl.

Veľkosť

Veľkosť zadávame ako násobok $spacer, ktorá má predvolenú hodnotu 1rem:

• 0 - nastaví margin alebo padding na 0,
• 1 - nastaví margin alebo padding na 0.25rem,
• 2 - nastaví margin alebo padding na 0.5rem,
• 3 - nastaví margin alebo padding na 1rem,
• 4 - nastaví margin alebo padding na 1.5rem,
• 5 - nastaví margin alebo padding na 3rem,
• auto - nastaví margin na hodnotu auto, využívame napríklad pri centrovaní blokových elementov.

Ak zmeníme hodnotu premennej $spacer vlastným buildom Bootstrapu, zmení sa v rovnakom pomere aj vyššie uvedené hodnoty.

Vertical align

Tieto utility slúžia na zvislé centrovanie. Zatiaľ sa však neradujte, pretože iba nastavujú hodnotu CSS vlastnosti vertical-align. Tá dokáže centrovať len riadkové elementy, inline bloky alebo elementy tabuliek. K tomu pravému zvislému centrovaniu sa dostaneme až pri flexi.

Poďme si to ukázať:

<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ýsledok:

Visibility

Ako posledný si predstavme utility triedy .visible a .invisible, ktoré vnútorne menia hodnotu CSS vlastnosti visibility. Elementy budú teda skryté, ale stále budú na stránke zaberať miesto, ako by tam boli. Triedy nijako nepracujú s CSS vlastností display.

Ratio

Na koniec utilít si pridáme ešte jednu nápomocnú vec pre vkladanie videa z YouTube. Tá už nie je zaradená pod utilitami, ale je súčasťou súčasťou skupiny Helpers pod názvom Ratio. Pri vkladaní YouTube videa do stránky môžeme naraziť na problém s udržaním stáleho pomeru strán. Zvlášť ak chceme, aby bolo video responzívne. Aj keď pre neho napíšeme responzívny štýl, je problém udržať stále rovnaký pomer strán daného elementu. V Bootstrape 5 sa tento problém rieši pomocou tried .ratio-*.

Akýkoľvek prvok, napríklad <iframe>, zabalíme do nadradeného prvku s triedou .ratio a pomerom strán. Bezprostredný podriadený potomok je automaticky dimenzovaný vďaka nášmu univerzálnemu selektoru .ratio > *.

Na vloženie responzívneho YouTube videa použijeme nasledujúci 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 pomerov strán videa máme:

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

Živá ukážka:

V budúcej lekcii, Bootstrap - Flex utilities, sa budeme venovať flex utilities, ktoré slúžia na jednoduché zarovnanie čohokoľvek kamkoľvek