Bootstrap je všudypřítomný, avšak ne vždy se jedná o ideální volbu pro daný úkol. V tomto článku vám představíme několik pozoruhodných alternativ!
Při náhodné kontrole zdrojového kódu webové stránky v dnešní době s vysokou pravděpodobností narazíte na Bootstrap. Všichni jsme si natolik zvykli na terminologii jako kontejner-fluid, řádek, col-sm-6, že si těžko dokážeme představit existenci jiného přístupu k vývoji frontendů. Proto, když se chystáme na nový projekt, automaticky saháme po Bootstrapu. Nicméně, obliba nezaručuje, že je Bootstrap vhodný pro všechny projekty a specifické požadavky.
Pro minimalistické frontendy může načtení veškerého Bootstrap CSS a JS způsobit značné zvětšení velikosti souborů.
Tento článek má dva cíle:
- Představit efektivní alternativy k Bootstrapu, které se od něj odlišují.
- Objasnit, proč byste měli zvážit tyto alternativy namísto Bootstrapu.
Domnívám se, že část s vysvětlením je klíčová, protože často si lidé ani neuvědomují, že mají problém, nebo že si výběrem Bootstrapu komplikují práci. Je důležité si uvědomit, že tento článek není kritikou Bootstrapu. Mám Bootstrap 4 rád a používám ho, kdykoliv je to možné. Nicméně, jako individuální vývojář musím zvažovat i další, méně obvyklá řešení. Navíc nejsem specialista na uživatelské rozhraní, a proto se nemusím tolik zabývat detaily při vytváření frontendů.
Pojďme se tedy podívat na dostupné alternativy.
Flexbox Grid
Zamyslete se: hlavním důvodem, proč jste začali používat Bootstrap a stále ho používáte, je jeho mřížkový systém. Ano, chvíli trvalo, než jste si zvykli na třídy row, col-md-6 atd., ale nyní je pro vás přirozené uvažovat o rozvržení z hlediska řádků, sloupců, posunů atd.
A upřímně řečeno, zbytek Bootstrapu může být trochu obtížný. Existuje spousta tříd, které je třeba si zapamatovat, ať už vytváříte formuláře, navigaci, tlačítka, tabulky nebo cokoliv jiného. Pokud jste jako já, stále si nemůžete zvyknout na všechny třídy a jejich funkce, a často Bootstrap používáte pouze pro grid a ostatní CSS si píšete sami.
V takovém případě můžete dosáhnout lepších výsledků s Flexbox Grid.
Jak název napovídá, Flexbox Grid je mřížkový systém založený na CSS Flexbox vlastnostech. Na rozdíl od samotného CSS však veškerá složitost je skryta, takže se můžete soustředit pouze na umístění prvků dle potřeby. Nejlepší na tom je, že názvy a třídy jsou podobné těm v Bootstrapu 4, což usnadňuje přechod mezi těmito dvěma nástroji. Zde je příklad kódu pro „prostor kolem“ ve Flexbox Grid:
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
Minifikovaný soubor CSS pro tento mřížkový systém má pouhých 10,7 KB, čímž ušetříte stovky KB celkové velikosti. V současnosti je Flexbox Grid mým oblíbeným, protože se nechci s Bootstrapem zbytečně trápit a upravovat ho. Rád začínám s holými prvky a přizpůsobuji si je sám pomocí Flexbox Grid.
Naučte se Flexbox zde, online.
PureCSS
Nebylo by skvělé, kdyby byl Bootstrap rozdělen na moduly a mohli jste importovat pouze ty, které potřebujete?
Tak, PureCSS šel touto cestou. Je to sada modulů, které pokrývají různé oblasti webu. Můžete si vybrat, zda stáhnete jeden, nebo všechny moduly, a i tak velikost stahování nepřesáhne 3,7 KB!
Ano, čtete správně.
Všechny moduly dohromady, zabalené pomocí gzip, mají 3,7 KB, ačkoliv jednotlivě mohou dosahovat více. Modul pro mřížku má jen 0,8 KB, zatímco základní modul má 1,0 KB. Tvůrci PureCSS uvádí, že byl navržen s důrazem na mobilní zařízení, a proto byl každý řádek CSS pečlivě zkontrolován z hlediska efektivity.
Řekněme, že potřebujete jen modul pro mřížku a formuláře. Stačí si stáhnout tyto dva (spolu se základním modulem) a vejdete se do 3,4 KB! Není třeba zahrnovat CSS z modulů pro tlačítka, tabulky a nabídky, pokud je nepoužíváte.
Nicméně, PureCSS má vlastní třídy a výsledný kód není podobný Bootstrapu:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>
Zde již neexistuje 12sloupcová mřížka. PureCSS má vlastní mřížkový systém, který určuje, jak široký by měl sloupec být. `pure-u-lg-1-4` tedy znamená, že tento prvek by měl zabírat 1/4 nebo 25 % dostupné šířky na velkých obrazovkách. K dispozici jsou také šířky jako násobky 1/5.
Celkově je PureCSS osvěžující a skvělý CSS nástroj, ze kterého můžete vybírat podle potřeby. Nicméně, vyžaduje určité úsilí a učení, protože je třeba si osvojit nový způsob práce.
PureCSS má také své vlastní třídy a výchozí styl, takže se v tomto ohledu od Bootstrapu příliš neliší.
Zimit
Rámec Zimit je v tomto seznamu takovým zvláštním případem. Ano, je to rámec pro tvorbu uživatelských rozhraní, ale zaměřuje se na konkrétní typy uživatelských rozhraní: makety.
Někdy potřebujete vyvinout frontend pro ukázku produktu. Ideální by samozřejmě bylo zapojit UX designéra a vytvořit makety v některém z pokročilých nástrojů pro wireframing (například Moqups, Balsamiq atd.). Stránky by byly pixelově dokonalé, barevné schéma elegantní, a stránky by byly otevřené pro připomínky a komentáře.
Ale skutečný život není ideální a často jste jediný vývojář, který musí zvládnout všechny role a dokončit práci. V takovém případě oceníte rámec, který:
- Umožňuje kódování v HTML/CSS.
- Je lehký.
- Má velkou sadu základních komponent.
- Má slušný a konzistentní styl.
- Pokud možno připomíná „šedý“ tón wireframe designu.
- Je snadno naučitelný.
- Má integrovaný CSS preprocesor.
Zimit splňuje všechny tyto požadavky. Má pouhých 84 KB a nabízí širokou škálu komponent. Některé z nich mi přijdou velmi atraktivní, protože jejich kódování by zabralo spoustu času.
Pohled na strom:
Drobečková navigace:
Karty:
Existuje mnohem více komponent, které stojí za prozkoumání. Podívejte se na ně zde.
Podívejme se, jak vypadá kód. Zde je příklad použití mřížkového systému v Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
„c“ zde znamená „sloupec“, takže „c4“ znamená sloupec, který zabírá čtyři jednotky (mřížka má velikost 12, stejně jako Bootstrap). Velmi podobné Bootstrapu a podle mého názoru intuitivní.
Zimit je ucelený a snadno použitelný framework pro vývoj prototypů uživatelského rozhraní, které jsou responzivní a rychle vypadají dobře. V oblasti prototypování je lepší než Bootstrap, protože Bootstrap je mnohem větší a výsledný design není vždy ideální.
HTML KickStart
Většina projektů, které vyvíjíte, se řídí rychlostí. Největší překážkou pro zrychlení vývoje webu je frontend, a největší brzdou vývoje frontendů je potřeba kódovat vizuálně atraktivní a interaktivní komponenty. Vzhledem k mnoha způsobům, jak se může komponenta chovat, a mnoha velikostem obrazovek, se může kódování a správa komponent stát pro vývojáře noční můrou.
HTML KickStart nabízí alternativní řešení.
Jednoduše řečeno, jedná se o sadu atraktivních komponent, které můžete snadno vložit do svých projektů a tím zkrátit dobu vývoje. Zde je několik zajímavých komponent:
Rozbalovací nabídka:
Tlačítka:
Karty (uprostřed a s ikonami):
Materialize
Pokud máte rádi Bootstrap pro jeho ucelená řešení běžných problémů webdesignu, ale jste fanouškem Material Design, měli byste vyzkoušet Materialize.
Materialize je v mnoha ohledech podobný Bootstrapu – 12sloupcový mřížkový systém, offsety a známé komponenty jako formuláře, karty atd. Má ale určité vychytávky, které mohou mnohé zaujmout.
Push/Pull:
Funkce push/pull v Materialize CSS umožňuje změnit pořadí sloupců. To připomíná nový standard CSS Grid, kde se rozvržení liší od pořadí prvků.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
Výsledek:
Sloupce si vyměnily místa, což je v tradičním CSS založeném na Bootstrapu obtížně dosažitelné.
JavaScriptové funkce:
Materialize přichází s několika funkcemi a efekty JavaScriptu. Tooltipy, Toasty (krátkodobá oznámení), Parallax, Pushpin atd., jsou jen některé z nich. Jeden zajímavý efekt je FeatureDiscovery, který umožňuje zvýraznit prvek na stránce při nějaké události (např. kliknutí na tlačítko), aby upoutal pozornost uživatele. Je obtížné to popsat slovy, takže se podívejte na https://materializecss.com/feature-discovery.html.
Celkově je Materialize skvělou alternativou k Bootstrapu, zejména pro ty, kteří chtějí použít Material CSS rámec.
Závěr:
Bootstrap je synonymem pro responzivní design. Byl to Bootstrap, kdo zpopularizoval koncept „mobile-first design“ a ukázal, jak ho realizovat. Ačkoli Bootstrap ve většině případů splní svůj účel, pouhé dokončení práce není vždy dostačující. Pokud máte pocit, že vás Bootstrap omezuje a vaše potřeby jsou specifické, jedna z výše uvedených možností by vám mohla pomoci. 🙂