Bootstrap v předvečer páté verze

Přípravy vydání nového Bootstrapu s pořadovým číslem 5 vrcholí, a tak se podívejme, v jakém stavu se nachází nejpoužívanější framework webového frontendu.

Dominance Bootstrapu nad konkurenty vyplývá z Výroční zprávy HTTP Archive za rok 2019.

Další knihovny se na vzorku více než 5 miliónů stránek podílejí méně než jedním procentem.

Když už známe záběr Bootstrapu, můžeme se podívat, co přináší aktuální verze 4.5.3 a také na to, co očekávat v nejbližší době. Poslední půlrok tým Bootstrapu souběžně vyvíjí jak nadcházející verzi 5, tak zanáší do aktuální čtyřky vše podstatné z pětky, aby se zjednodušil následný přechod na vyšší verzi frameworku. Tato fáze se uzavře vydáním verze 4.6, pak už se vývojáři pod vedením Marka Otta budou věnovat naplno jen dokončení Bootstrapu 5.0.0-beta1, vizte plán prací na GitHubu.

Nejprve si ovšem shrňme dosavadní vývoj.

Minulost

Příspěvek Bootstrapu k vývoji frontendu není vůbec malý. Od počátku razil responzivní design, jehož používání si kladl za cíl zjednodušit. Nemálo kódérů sahalo (a sahá) po Bootstrapu jen kvůli propracované layoutovací mřížce – gridu. Pozor, nezaměňujme s CSS gridem, který je v současnosti na vzestupu, ale na jaře 2011, kam se nyní ohlížíme, byl teprve ve fázi working draft. V prvních třech verzích se proto pro tvorbu layoutu (zne)užívala vlastnost float. Nutno dodat, že tento hack (ano, nazývejme věci pravými jmény) autoři Bootstrapu nevynalezli, zato ho ovšem důkladně zpopularizovali. Ač překonán flexovou variantou (v Bootstrapu ve verzi 4) a zejména zmíněným CSS gridem, funguje dodnes. (Mrkněte na srovnání všech 3 přístupů v jediném CodePenu.)

Kromě této své robustní responzivní mřížky přispěl Bootstrap svým dílem i k rozmachu CSS preprocesorů. Protože každý, kdo chtěl využít plnou sílu Bootstrapu, ať už proto, aby si ho upravil k obrazu svému, nebo aby odhodil zbytečnou zátěž nevyužitého CSS, se s nimi musel chtě nechtě naučit pracovat. Dnes nám to už přijde jako základní kodérská dovednost, ale v dřevních dobách Bootstrapu to byl stále ještě novátorský přístup.

Přehled jednotlivých verzí

Základní přehled přináší následující tabulka. K ní by se dalo zjednodušeně dodat, že s každou novou verzí Bootstrapu opustili tvůrci jednu verzi Internet Exploreru (počínaje IE6) s tím, že dokončovaná pátá verze IE definitivně zavrhla, což před vývojáři otevřelo zcela nové možnosti.

Doplňme pár zajímavostí k jednotlivým verzím.

Bootstrap, from Twitter

19. dubna 2011

Původně vznikl během hackatonu pod názvem Twitter Blueprint. Zdrojový kód byl napsán v preprocesoru Less. Jeho základem byla responzivní 16sloupcová mřížka s maximální šířkou 940 px. Kód navíc umožňoval rozdělit stránku až na 24 sloupců s tím, že od počátku bylo možné si počet sloupců a další nastavení frameworku uzpůsobit pomocí proměnných. Tvůrci začali ještě s podporou IE6, ale od verze 1.2.0 se podpora zúžila už jen na IE7+. Z javascriptových komponent už obsahoval vše, co známe z pozdějších verzí, tedy modal, popover, tooltip aj. Všechny komponentové skripty byly napsány s využitím knihovny jQuery – ve své době nutnost se ovšem časem proměnila v nechtěnou zátěž. Ale k tomu se ještě dostaneme.

(Twitter) Bootstrap

31. ledna 2012

Počet sloupců se ustálil na známých 12. Mezi javascriptovými komponentami se nově objevil např. našeptávač Typeahead (který ovšem později zase zmizel v propadlišti dějin). Zajímavou novinkou byla možnost přizpůsobit si framework pro své potřeby přímo ve webovém rozhraní. Dalo se tak vyhnout nutnosti kompilace, zájemce si v obšírném formuláři naklikal a navolil proměnné, aby si následně stáhl CSS vygenerované na míru. V době, kdy se mnoho kodérů s příkazovou řádkou teprve seznamovalo, to byla vítaná berlička.

Ve verzi 2.2.0 přibyla komponenta .media. Těm, kteří se už s příkazovkou spřátelili, přišla vhod instalace pomocí Boweru – vzpomínáte?

Na svém blogu autoři v dubnu 2012 vysvětlili, co je ten jejich framework zač a k čemu má sloužit:

… on an individual component level, Bootstrap is a tool for performing common web development tasks faster and easier.

Ve stejném duchu vznikla dnes již zapomenutá knihovna pro vývoj mobilních aplikací s názvem Rachet. (Poslední commit přibyl v březnu 2016.)

Bootstrap 3

19. dubna 2013

Dalo by se říci, že třetí verzí se Bootstrap institucionalizoval. Osamostatnil se repozitář do nynějšího GitHub.com/twbs/, vlastní dokumentace se pak usídlila na doméně getbootstrap.com.

Z technických novinek stojí za zmínku opuštění PNG ikon ve prospěch ikonfontu Glyphicon. Javascriptové komponenty dostaly jednotný namespace.

Co se designu týče, tvůrci se svezli na vlně módního flat designu.

Bootstrap 4

18. ledna 2018

Alfa vyšla již 19. dubna 2015, tedy jen 2 roky po trojce. Ale pak se vývoj rozvlekl na několik dalších let. Nejeden frontendista během této doby zlomil nad Bootstrapem hůl.

Na vině bylo mimo jiné i to, že Mark Otto, jeden z hlavních tvůrců BS, tou dobou intenzivně pracoval na redesignu webového rozhraní GitHubu. Proto jsme se finální verze dočkali až o další 3 roky později. (Musím se přiznat, že ve své nedočkavosti jsem na některých vedlejších projektech používal již beta verze, a to k plné spokojenosti.)

Kdo si počká, ten se dočká – stálo to za to. Kdyby jen proto, že v mezičase nám umřely staré Explorery, a tak se (oproti původním záměrům, kdy měl být volitelný) v designu komponent (včetně layoutu) již naplno prosadil flexbox.

A tím jsme se dostali do současnosti. Na aktuální verzi 4 se podívejme důkladněji.

Současnost

Sass místo Less

Zásadní změnou oproti předchozím verzím, byl přechod od preprocesoru Less k Sassu, a to v konzervativnější odrůdě SCSS. Mark Otto při té příležitosti a pln nadšení z tehdejšího rozmachu postCSS tweetoval, že verze 5 bude pravděpodobně napsána v postCSS.

Z toho nakonec potichu sešlo…

Z možností, které Sass nabízí oproti předchozímu Lessu, tvůrci využili zejména map. Jejich pomocí si můžete velmi snadno předefinovat vzhled Bootstrapu, případně jej rozšířit pro účely svého projektu. Předvést si to můžeme na komponentě Embeds, která se používá k umisťování nahrazovaného obsahu ve správném poměru stran.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

V základní verzi autoři dodávají tyto předdefinované poměry stran:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;

Přidat si vlastní je pak záležitostí jednoho řádku. Podobně se ve zdrojovém SCSS pracuje s barevnými schématy, responzivními breakpointy i jinými mazanými vychytávkami, jako je například funkce escape-svg(), díky níž můžete inlinovaná SVG ponechat v deklaracích pro background-image dobře čitelná, protože závadné znaky nahradí za vás. (Nutno dodat, že obdobnou funkci obsahuje Less v základu, ale asi to nestačilo.)

Reboot

Mezi klíčové části zdrojového kódu přibyl Reboot, ukázkově okomentovaný stylopis, který je nadstavbou známého Normalize.css. Kromě sjednocení výchozího vzhledu prvků nastavuje i jejich základní design. Reboot spolu s layoutovací mřížkou (grid) a utility třídami (níže) lze používat jako samostatná CSS.

Užitečné utility třídy

Co mě osobně na BS4 baví a těší nejvíce je sbírka utility tříd. Bootstrap sice nezachází tak daleko jako známé Tachyony nebo na oblibě získávající Tailwind CSS, přesto pokrývá širokou škálu CSS vlastností. Jejich pomocí vyčarujete kýžený vzhled komponenty rychlostí blesku – pouhou úpravou HTML (přidáváním tříd). Z dosavadní praxe mi vychází, že promyšlená kombinace komponentového přístupu a utility tříd je velmi výhodná pro údržbu a rozvoj složitějších webů. Jinými slovy, jestli bych něco z BS4 použil na každém webu, pak právě utility třídy. Existuje dokonce rozšíření základních (spacing, float, text) utility tříd pro verzi 3, pokud vás váže zpětná kompatibilita, neváhejte po ní sáhnout.

Plnou sílu utility tříd oceníte při spojení flexboxových utilit s příponami pro layoutovací breakpointy (-sm-, -md- apod.). Vhodně přidanými třídami můžete postavit a responzivně přestavovat i velmi komplexní layouty. Nejlepší bude příklad.

<div class="d-sm-flex border p-2 m-3">
  <img src="…" class="d-none d-sm-block align-self-start mr-3" alt="">
  <div class="d-flex flex-column">
    <h5 class="mt-0 mb-3 mb-sm-2">Článek o Bootstrapu 6</h5>
    <p class="mb-sm-2">To se ještě načekáte, lidové vrstvy…</p>
    <a href="#" class="btn btn-sm btn-info align-self-sm-end align-self-md-start">číst dál</a>
  </div>
</div>

Živou ukázku naleznete na CodePenu.

Takto si pomocí utilit vytvoříte komponentu .media. Proto ji v chystaném Bootstrapu 5 nenajdete, ale to bychom předbíhali.

Zatímco většina utility tříd nastavuje jedinou CSS vlastnost na konkrétní hodnotu, najdeme i komplexnější utility. Velmi užitečná je utility třída .stretched-link. Pokud ji přidáte na odkaz, vykouzlíte tím z nadřazeného blokového prvku celoklikatelnou dlaždici (trik spočívá v absolutně pozicovaném pseudoelementu ::after, nejlépe se podívat do dokumentace).

Další změny

Za významný posun vpřed považuji i obecné zploštění selektorů. Zejména u navigační lišty (.navbar) nebo tabulek se tím deklarace pravidel dost zjednodušily. Ve verzi 3 byly často definovány posloupností přímých potomků, a přebíjet takové styly bylo dost obtížné. Přitom stačilo přidat do HTML pár tříd navíc. Ale po bitvě je každý generálem, že?

/* Bootstrap 3 */
.navbar-default .navbar-nav > li > a {…}

/* Bootstrap 4 */ 
.nav-link {…}

Malou změnou, ovšem s velkým dopadem, bylo zavedení rem jako základní jednotky pro velikost písma. Pixely používané v předchozích verzích byly opravdu předpotopní. V souvislosti s tím se ve většině prohlížečů zvětšila základní velikost písma ze 14 px na 16 px (~ 1 rem). Od rem se pak odvíjejí všechny hodnoty pro margin a padding. Pro úplnost dodejme, že responzivní breakpointy zůstaly v px. Když už je zmínka o breakpointech, zde je jejich přehled:

• < 576 px (nově od BS4)
• 576–767 px -sm-
• 768–991 px -md-
• 992–1199 px -lg-
• > 1200 px -xl- (nově od BS4)

V BS4 se také poprvé objevily proměnné vlastnosti (CSS custom properties) – zatím jen pro barvy. Ve stylopisu se s nimi však nijak nepracuje, při kompilaci se jim pouze přiřadí hodnoty. Případné použití nechávají autoři na nás.

I když samotné vydání verze 4 bylo vytouženým počinem, autoři vůbec nepolevili ve svém úsilí a v dalších desetinkových upgradech nejen opravovali chyby, nýbrž i přidávali další funkcionalitu a komponenty. Verze 4.3 tak přinesla RFS unit resizing engine. Co to znamená? Přidává do vašeho oblíbeného preprocesoru mixin, který délkové jednotky přepočítává pomocí funkce calc() úměrně velikosti okna. Třebaže pod zkratkou RFS se skrývá responsive font size, lze tento mechanismus uplatnit u libovolných vlastností, kterým se zadávají délkové jednotky.

Souběžně s vývojem samotného frameworku pracoval tým i na sbírce SVG ikon, která se objevila v listopadu 2019. Původně totiž verze 4 žádné ikony neobsahovala. Je to také poprvé, co má Bootstrap vlastní ikony, v předchozích verzích využíval knihovny dalších stran. Můžete je používat i zcela nezávisle na Bootstrapu, na výběr máte přes 1 100 ikonek.

Verze 4.4 byla poslední, která se dočkala novinek. Od nynějška se budou vydávat pouze opravy. Autoři se nakonec rozhodli backportovat do Bootsrapu 4 některé novinky z vyvíjeného Bootstrapu 5, aby uživatelům usnadnili budoucí přechod ze čtyřky na pětku. Poslední takto vylepšenou verzí se má stát Bootstrap 4.6, jejíž vývoj vrcholí nyní po vydání první beta verze BS5. Stane se tak LTS verzí, což je nový přístup ke správě projektu, který autoři oznámili v létě 2019 spolu s ukončením podpory verze 3.x.

Od jara přibyly ve verzích 4.5.x zejména různé opravy a výše zmíněné backporty ze souběžně vyvíjeného (a v podobě alfa verzí uvolňovaného) BS5.

Blízká (?) budoucnost!

Tolik k přítomnosti (psáno v únoru 2020, revidováno v prosinci 2020). Co nás čeká? Podívat se můžete na plán a stav projektu. Osobně odhaduji, že autoři cílí vydání na tradiční datum 19. dubna, ale to berte jako soukromý názor. Jak se v dubnu ukázalo, zcela mylný (i když co letos nebylo tak trochu jinak…). Tak či tak, vývoj se díky přispění komunity opět dostal do obvyklého tempa (nová verze co 2 roky) a práce postupuje nezadržitelně vpřed.

Bootstrap 5

2021

Flexbox grid (sic!)

Layout grid se sice nijak neliší od současného pojetí, ale k některým změnám přeci jen dojde. V rámci layoutovací mřížky přibudou utility třídy pro velikost odsazení, a to jak vodorovné, tak svislé. Jde vlastně o flexboxovou nápodobu dvojrozměrného CSS gridu. Zevrubný popis naleznete v příslušném issue na GitHubu a ukázky použití pak v náhledu dokumentace.

Přesto si CSS grid cestu do Bootstrapu našel! Prozatím jen v podobě utility třídy .d-grid a bez dalších tříd, které by pokrývaly další vlastnosti CSS gridu. Lze ale využít ty, které se shodují s flexboxovými.

Nový Bootstrap dostane pestřejší barevnou škálu, každá z výchozích barev bude mít 9 odstínů a všechny půjde použít pomocí utility tříd. Autoři rovněž brali v potaz dostatečný kontrast, takže barevné kombinace písma a pozadí splňují nároky na přístupnost.

Dalších změn se Bootstrap dočká pod kapotou.

Utility API

Utility třídy dostanou své API, postavené na výše zmíněných mapách v Sassu. Znamená to, že si na jedné straně budeme moci doplňovat vlastní utility třídy, a to tímto způsobem:

$utilities: (
  "opacity": (
    property: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
);

Tím získáme následující CSS:

.opacity-0:hover {
  opacity: 0;
}

.opacity-25:hover {
  opacity: .25;
}

.opacity-50:hover {
  opacity: .5;
}

.opacity-100:hover {
  opacity: 1;
}

Na druhé straně dostaneme možnost vyloučit z kompilace třídy, o které nestojíme:

$utilities: (
  "float": null,
)

Proměnné vlastnosti

Zavržení ohavného IE11 otevřelo brány plnému využití proměnných vlastností. Najdeme je napříč stylopisem: staví na nich barevné schéma, layout, komponenta .embed (responzivní prvky 3. stran pomocí známého padding-hacku) nebo varianty tabulek. Je zjevné, že se zdaleka nevyčerpaly všechny možnosti.

Sbohem jQuery!?

Nejočekávanější změnou je odvrhnutí jQuery. Všechny javascriptové komponenty jsou přepsány do čistého JavaScriptu, čímž se BS osvobodí od ostudné (v roce 2020) závislosti. Podle všeho (v době psaní článku) zbývá už jen doplnit poslední střípek dokumentace. Takto se promění inicializace modálu:

// Bootstrap 4: jQuery
$('#myModal').modal({
  keyboard: false
})

// Bootstrap 5: vanilla JS
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

Nově také půjde Bootstrap použít jako modul (konkrétně ES modul, ESM).

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

I když je odstranění závislosti na jQuery všeobecně vítáno, bezpochyby existují (a budou existovat) projekty, kde se jQuery nadále používá (nebo přežívá). Proto pokud Boostrap detekuje jQuery v objektu window, přidá všechny komponenty i ve verzi pro jQuery. To znamená, že na takových projektech bude možné stále používat i tradiční inicializaci pluginů, např.: $('[data-toggle="modal"]').modal().

Pořád také platí, a autoři to i doporučují, že všechny javascriptové pluginy lze inicializovat a nastavovat pomocí data- atributů, čili bez nutnosti psát JS. Data atributy jsou nově ve jmenném prostoru data-bs-*.

I dokumentace jde s dobou, opouští se Jekyll ve prospěch Huga. Stejně tak se mění i testovací nástroj, kdy místo pomocí QUnit se bude testovat prostřednictvím Jasmine.

Závěr

Co říci závěrem? Jak vidno, revoluce se nekoná, tedy přinejmenším v designu komponent. Ale bylo by chybou ji očekávat. A to nejen s ohledem na (situací vynucenou) podporu IE11. Kromě toho Bootstrap dozrál do stavu, kdy bychom jistou konzervativnost měli nejen očekávat, ale i vyžadovat. Čili dávat přednost evoluci před revolucí.

Na druhou stranu bychom tvůrcům Bootstrapu křivdili, kdybychom je měli za konzervativce. Novinek se zjevně neštítí. Ovšem postupují uvážlivě. Nejprve přepisem javascriptových komponent do čistého JS doběhli ujíždějící vlak webových trendů. Následným použitím ES modulů přestoupili do rychlíku, který se zdálo, že už jim ujel. Místenku v něm si zajistili zavržením podpory Internet Exploreru, což jim rozvázalo ruce k použití skutečně moderního CSS i JS. Takovému tahu na bránu vděčí projekt i celosvětové komunitě vývojářů, která svým aktivním zájmem o jeho vývoj dokazuje, že s Bootstrapem musíme počítat i do budoucna.

Dále je patrné úsilí o vyšší modularitu, a to v rozdělení frameworku do samostatných částí, které lze používat nezávisle. Dále pak v Utility API a nakonec i v takových detailech, jako je snižování specificity selektorů u komplexnějších komponent, jako je navigační lišta nebo třeba tabulky. Uvidíme, jestli to bude stačit a zda svěží vítr Tailwindu neodvane Bootstrap do webového muzea. I kdyby to mělo nastat, nějakou dobu to potrvá, což potvrzuje i State of CSS 2020.

Pro Bootstrap 6 bude určující zřejmě i to, jak se tvůrci vypořádají s CSS gridem. Tady těžko věštit. Hlavní z autorů, Mark Otto, již načrtnul, jak by šlo vytvořit základní bootstrapí mřížku pomocí display: grid. Berme to však spíše jako materiál k úvahám (ostatně na konci náčrtu naleznete nevyřešené otázky). Protože nacpat celou škálu možností, kterou CSS grid nabízí, do prosté 12sloupcové mřížky se zdá poněkud marnotratné. Celkově si to vyžádá hlubší úvahu a následné přepracované pojetí layoutu. Ale třeba se mýlím.

Je také docela dobře možné, že layoutovací mřížku, která byla až donedávna tím hlavním tahákem Bootstrapu, autoři v odbydou nějakým základním vytěžením CSS gridu, ale vlajkovou lodí se nově stane třeba propracovaný systém utilit tříd. Anebo JS moduly. Ale kdoví.

V každém případě je potřeba mít na paměti, že Bootstrap není žádným svatým grálem ani univerzálním řešením. V lecčems je možná nepřekonatelný, na mnohé se však vůbec nehodí. Ale i když nenacházíte možnosti pro jeho přímé uplatnění, určitě se vyplatí sledovat směr, kterým se ubírá. Můžeme přislíbit, že vám v tom sledování pomůžeme.