17. diel - Bootstrap - Utilities

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

V dnešnom tutoriáli CSS frameworku 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šné utility si preberieme dnes.

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é majú názov podľa formátu:

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

Kde je použitá hodnota 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 popisy carouselu.

Responzívnu verziu podľa breakpointov, ktoré sme preberali v lekcii Bootstrap - Typografia 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.

Ak použijeme napríklad triedu .d-md-block, element bude 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 môžeme na dosiahnutie ideálneho responzívneho správania spolu kombinovať. 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 zo všetkého dva príklady. Ak 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 xs zariadeniach, 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

Na 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 scrollovaní mimo stránku. Inak zostáva na svojom mieste.

Visually hidden

Povzbudzovanie k optimalizácii obsahu aj pre hlasové čítačky nás sprevádza 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 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>

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

<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 stihli stretnúť 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ť v praxi:

<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 túto výšku aktívne zaplní. 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 niekedy niekde potrebujeme nejakú tú medzierku a definovať stále nové a nové štýly by bolo veľmi frustrujúce.

Tried je pomerne veľa 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 start) 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, čo využívame napríklad pri centrovaní blokových elementov.

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

Vertical align

Tieto utility slúžia na zvislé centrovanie. Zatiaľ sa však netešte, 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 flexe.

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 predstavíme 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 vlastnosťou display.

Ratio

Na koniec utilít si pridáme ešte jednu nápomocnú vec ohľadom vkladania videa z YouTube. Tá už nie je zaradená pod utilitami, ale je 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 Bootstrap 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.

Live ukážka:

V ďalšej lekcii, Bootstrap - Flex utilities, sa budeme venovať flex utilities, ktoré slúžia na jednoduché zarovnanie čohokoľvek a kamkoľvek