Prečo z polovice? Hovoríme o alpha verzii Bootstrap 5 a všetci dobre vieme, že je skvelé vyskúšať si nové veci „medzi prvými“, ale s ich nasadzovaním do nových projektov sa ponáhľať netreba. Okrem toho, že môžu chýbať rôzne funkcionality, niektoré existujúce sa do solídnej beta verzie zmestiť nemusia. Môžeme ale s veľkou istotou povedať, že v5 prechádza výraznou zmenou na strane UX, aj na tej používateľskej. Na webe na vás „mrkne“ nové logo, upravená šírka stránky, letter spacing alebo line height pre lepšiu čitateľnosť, prípadne zmenený sidebar pre lepšiu navigáciu. Veľmi príjemného „faceliftu“ a nových funkcií sa dočkala rozsiahla dokumentácia.
jQuery a JavaScript
Asi najzásadnejšími zmenami sú zbavenie sa závislosti na jQuery – to už oficiálne v Bootstrap 5 nenájdete a ďalšie JavaScriptové zmeny, aby bol váš prechod z v4 na v5 čo najhladší. Tých bolo v čase písania tohto článku 85 a všetky nájdete tu. Aj keď sa vývojárska verejnosť nedávno dočkala nového jQuery releasu, tvorcovia Bootstrapu sa z celkom objektívnych dôvodov rozhodli jQuery „úplne“ zrušiť. Výsledkom tohto kroku by malo byť zdokonalenie dvoch veľmi podstatných parametrov – menšia veľkosť Bootstrapu a jeho vyššia rýchlosť načítania. jQuery sa ale naďalej používa a je prítomné v existujúcich projektoch. Preto ak ho v5 objaví v objekte window, pridá všetky komponenty aj vo verzii pre jQuery.
Koniec podpory pre Microsoft Internet Explorer
Ďalšou zmenou je ukončenie podpory pre Explorer. To nakoniec nie je veľkým prekvapením. Samotný Microsoft ho už niekoľko rokov nepodporuje a z verejne dostupných zdrojov je známe, že jeho používateľnosť je globálne pod 1 %.
CSS custom properties
Práve vďaka tomu, že dal Bootstrap zbohom Exploreru, začal používať CSS custom properties v širšom rozsahu. Tie sme síce ako root variables mohli nájsť už vo verzii číslo 4, no boli vytvorené len pre farby a fonty. V Bootstrap 5 ich nájdete aj v komponentoch alebo v možnostiach rozloženia. Súčasťou zmeny by malo byť zapracovanie SASS premenných do CSS properties bez nutnosti skompilovania kódu do CSS. Na oficiálnom blogu sa uvádza príklad na tabuľke.
Vylepšená dokumentácia, farby a možnosti rozširovania Bootstrap 5
V Boostrape sa pozreli aj na UX ich webu, čo sa odzrkadlilo na vylepšení dokumentácie hneď na niekoľkých miestach. Pribudlo detailnejšie vysvetlenie, odstránili sa nejasnosti a mätúce info a zväčšila sa podpora pre rozširovanie Bootstrapu. Všetko o rozširovaní začína v „Customize sections“, kde nájdete tiež viac užitočného obsahu „ako na to“, prípadne šablónu štartovacieho npm projektu. Rozšírenia sa dočkala aj paleta farieb a jej kontrastná metrika, vďaka čomu si teraz ľahšie prispôsobíte vzhľad vášho webu alebo apky.
Formuláre a ich ovládacie prvky
Kompletnou zmenou prejdú aj formuláre, resp. komponenty a ich dokumentácia. Všetky ich štýly sa zlúčili do novej sekcie. Zmenou prešli aj ovládacie prvky formulárov – checkboxy, switche, radio alebo file elementy. Každý prvok má vlastný vzhľad, ktorý zjednocuje štýl a jeho funkcionalitu naprieč rôznymi prehliadačmi a operačnými systémami. Prispôsobovanie ich vzhľadu by malo byť jednoduchšie.
Vylepšený Grid systém
Pod slovom „vylepšený“ si predstavte nadstavbu toho existujúceho, ktorý poznáte z v4. Čo je teda nové? Pridal sa nový grid stupeň pre obrazovky s veľkosťou väčšou ako 1400px. Gutter triedy, ktoré sa používajú na prispôsobovanie medzier v grid systéme, boli nahradené .g* utilitami a majú nové označenie .gx-* pre horizontálne gutters, respektíve .gy-* pre vertikálne. Prípadne len .g-*, ak chcete kontrolovať oboje naraz. Týmto spôsobom je možné ich jednoducho nastavovať, podobne ako napríklad padding alebo margin. Kompletné vysvetlenie používania a zápisu vylepšeného grid systému a jeho modifikovania nájdete tu.
Utilities API
Ako sme spomenuli v Grid systéme, utilities sa používajú na prispôsobovanie alebo menenie parametrov jednotlivých elementov. Sú to vo svojej podstate CSS triedy s preddefinovanými hodnotami. Ak sme v minulosti potrebovali nastaviť inú hodnotu, ako je defaultne v týchto class-och zadefinovaná, museli sme buď vytvoriť nový class a pomocou neho defaultnú hodnotu prepísať, prípadne editovať tú konkrétnu v súbore premenných. Nová verzia Bootstrapu ponúka oveľa jednoduchší spôsob, ako vytvoriť a pridať nové utility k tým existujúcim, prípadne ako ich meniť. Využíva sa na to SASS nástroj.
Takto vám vzniknú nové classy .w-40 a .w-60, ktoré automaticky nastavia atribút width na zadefinovanú šírku.
Bootstrap Icons
S ďalšou verziou Bootstrapu prichádza aj novšia verzia Bootstrap Icons, ktorá štandardne ponúka na výber z viac ako tisíc ikon, no táto prináša kopec nových ikon a ešte väčší kopec starých upravených a prerobených. Tvorcovia sa pohrali s ich veľkosťou a zdokonalili icon processing script na čítanie viewBox dimenzií každého SVG zvlášť. Pridal sa nový SVG Sprite. Táto funkcionalita umožňuje naprieč vaším projektom efektívne používať ikony bez toho, aby ste museli vkladať celé HTML aj s SVG zdrojovým kódom.
Takto to vyzerá v novom šate:
