K čemu je dobrý Bootstrap a frontend frameworky?

Bootstrap

Pokaždé k něčemu jinému — k vyřešení zobrazování napříč různě velkými displeji, k ušetření kodérovy práce, občas i k poslání grafika na Úřad práce… Dobře, trochu přeháním. Reálných scénářů použití ale v článku najdete i tak dost. Nejdřív se ale podíváme, kde se frontend frameworky vzaly a co to vlastně je.

Rád říkám, že frontend frameworky v určitých segmentech zpřístupňují nástroje webového frontendu masám podobně, jako to udělalo jQuery s JavaScriptem. Pokud ale čekáte článek typu: „Revoluce! Revoluce! Hned si běžte Bootstrap/Foundation někam sehnat, jste bez nich ztracení!“, pak sorry, nemůžu sloužit. Je to složitější. První věta odstavce platí pro některé segmenty webdesignu a některé pracovní postupy. Než se dostaneme k jejich ukázkám, musíme si udělat krátkou exkurzi do… ehm… historie.

Vezměte know-how a množství práce, kterou nám ušetřily CSS frameworky, přidejte nástup mobilních zařízení, šoupněte tam ještě CSS preprocesory a modulární systémy organizace kódu. Odeberte staré prohlížeče, které tu v době CSS frameworků vládly a problémy, které nám způsobovaly. Co zbude, vložte do mixéru. Ke spouštěcímu tlačítku postavte pár šikovných lidí v progresivních firmách. Volbu rychlosti už nechte na nich.

Autor článku pořádá celodenní školení Bootstrap a frontend frameworky. V menším rozsahu je pak téma součástí kurzu Dnešní webový frontend.

 

Tou první progresivní firmou je Twitter, pro jehož potřeby vznikl Bootstrap. Druhou Zurb. Tam namixovali Foundation. Pokud vám tyhle jména dosud nic neříkaly, dobře si je zapamatujte.

img_1

Buzzword „frontend framework“

Buzzword to zatím není. Ale bude. Autor na tom při psaní článku usilovně pracoval.

Ale vážně — někdo Bootstrapu, Foundation a spol. říká „responzivní frameworky“. Není to přesné, oba řeší daleko více problémů než jen responzivnost. Myslím si, že z větší nebo menší části pokrývají úkoly, které při vývoji webu dnes musí splnit frontend designér neboli kodér neboli frontendista. Jde tím pádem o sadu nástrojů usnadňující práci s typografií, tvorbu layoutu, vytváření elementů uživatelského rozhraní a zároveň ošetřující zobrazování napříč platformami. Proto frontend frameworky.

Pojďme rychle prolítnout anatomii frontend frameworku…

Mřížku, výchozí typografii a stylování pro formulářové elementy už znáte z CSS frameworků jako byl Blueprint.

Co ovšem z CSS- dělá frontend frameworky? Jednoznačně komponenty uživatelského rozhraní. Tím může být malinké CSS tlačítko s ikonkou, ale také komplexní HTML/CSS/JS kód tvořící akordeón nebo karusel. Pak taky modální okna, navigace, záložky, tooltipy, thumbnaily, dropdowny a další děsivé anglicizmy, jež my webaři rádi používáme, když chceme machrovat před holkama.

Nojo, ale proč vlastně využívat unifikované komponenty uživatelského rozhraní?

První část odpovědi by nám mohl dát David Heinemeier Hansson: „Toto je sněhová vločka. Vaše aplikace není jedna z nich. Většina věcí, které většina lidí dělá, není nijak unikátní. Vaše potřeby nejsou nijak ‚zvláštní‘.“

Druhá část odpovědi je složitější. Mnoho lidí právě v jednoduchosti a unifikovanosti komponent spatřuje problém, a pak nevidí důvod, proč vůbec frontend frameworky používat. Zatím se budete muset spokojit s mým ujištěním, že mezi dvěmi póly míry využití frameworků (nevyužívat vůbec vs. využívat všechno co obsahují) existuje mnoho zajímavých úrovní. Více si řekneme za chvíli.

Frontend frameworky se dále pyšní nástroji těžce zařaditelnými do některé z uvedených škatulek. Třeba Interchange od Foundation je chytristika pro přepínání mezi různými typy obsahu pro různá zařízení, Adibe zase knihovna pro validaci formulářů.

5 scénářů použití frontend frameworků

Typizované weby jak Baťa cvičky!

Kamarádka Míša s kolegyní Adélou nemají agenturu — http://nejsmeagentura.cz/. Potřebovaly pomoci s jednoduchým webem a připravily si hezký obsah. Ten jsem v Jetstrapu převedl do jednoduchého prototypu a rovnou vygeneroval v kódu Bootstrapu. Pak už to chtělo jen pár hodin ruční práce v editoru a webík byl na světě. Další podobný bych dokázal vyrobit ještě rychleji, protože mi nad Bootstrapem začala vznikat sada znovupoužitelných nástrojů. Když bych se tedy chtěl živit výrobou cool-onepage-responsive stránek, Bootstrap mi výrazně pomůže vydělávat peníze.

Bootstrap jako rychlý start

Frontend frameworky je vždy lepší používat na úrovni preprocesorů, tedy LESS nebo SASS kódu. Je pak snadné vybrat si jen určitou sadu komponent a nepoužívat celý olbřímí kód. Co třeba jen formuláře?

@import "bootstrap/less/variables.less";
@import "bootstrap/less/reset.less";
@import "bootstrap/less/type.less";
@import "bootstrap/less/forms.less";

Výhodou samozřejmě je, že se počet komponent, které z frameworku využíváme, může během vývoje projektu měnit.

Zase něco z praxe: Autorům redakčního systému Webmium pomáhám vymýšlet systém responzivních šablon. Úplně na začátku jsme rychle potřebovali prototyp, ten byl s pomocí Bootstrapu postavený raz dva. Postupně jsme ovšem stále více využívali našich vlastních komponent. Nyní nám v rámci codebase Bootstrap obstarává plnění jen těch nejzákladnějších úkolů. Jsme mu ale vděční za to, jak nám urychlil start a zhmotnil představu, jak to vlastně chceme dělat.

img_2

Programátor: „Sbohem grafiku!“

Tenhle scénář využití je klasika. A zároveň erotický sen každého prgače, naštvaného na svého grafika. Programujete redakční systém nebo interní aplikaci, frontend vás hrozně nebaví a podle toho to taky vypadá. Obvykle si v pokročilé fázi projektu pozvete grafika a kodéra, oni vám to vizuálně vyčistí. Teď už nemusíte, vyberete si některý ze stylů pro Bootstrap. Grafici a kodéři už stojí ve frontě na Úřadu práce! Jen pozor, nezapomeňte si místo nich pozvat UX designéra. ;)

Frontend framework jako komunikační nástroj v týmu

A zase ty komponenty! Jenže — týmu ušetří hrozně moc práce, když se programátoři, kodéři, grafici i designéři shodnou na používání jednotného vizuálního jazyka. A tím může být právě některý frontend framework a jeho komponenty, klidně upravené na míru vašim potřebám. Pak:

  • Kodér už nepíše CSS pro elementy v PSD široký 260 pixelů, ale ví, že zabírá 4 sloupečky mřížky, takže tedy použije odpovídající CSS třídu nebo mixin.
  • Kodér netráví půlden hledáním jQuery pluginu pro akordeón, který by odpovídal tomu, co vidí v PSD. Ví, že má použít ten z Bootstrapu a parametry nastavit tak a tak.
  • Grafik a designér znovu nevymýšlí kolo a soustředí se na důležité věci. Zároveň ví, že díky použitím mřížky nebo komponentů frontend frameworku bude kodér odvádět daleko preciznější práci.

Amatérský webař

Na jednom školení webového frontendu jsem se seznámil s Václavem, účetním a po večerech nadšeným správcem obecního webu. Výrazy jako polyfill, prefix a fallback na něj myslím moc velký dojem neudělaly, ale když jsem začal mluvit o Bootstrapu, rozzářily se mu oči. A já si uvědomil, jak moc frontend frameworky zpřístupňují široké skupině lidí to, co ještě donedávna zvládali jen odborníci.

Podívejte se třeba, jak v Bootstrapu otevřete modální okno:

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 Otevři okno
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- Obsah modalniho okna -->
</div>

Vidíte? Žádná CSSka, žádné JavaScripty. Václav tady prostě může zůstat u HTML, kterému dobře rozumí. Už víte, jak to myslím s tím přirovnáním k jQuery?

Profíkům se tohle HTML nemusí líbit. Na frontend frameworcích je ale krásné, že obslouží uživatele různých úrovní pokročilosti. Chcete hezčí HTML? Pak ovšem musíme sáhnout po jedné z hlavních technických zbraní dnešního frontendu — CSS preprocesorech.

Preprocesorový profiwebař by to v LESSu samozřejmě mohl napsat takhle…

button {
  .btn;
  .btn-primary;
}

…a HTML jeho tlačítka by zůstalo čisté jako studánka.

Bootstrap nebo Foundation — který vybrat?

Je to samozřejmě složitější — každý z nás dělá trošku jiné typy webů, má jinou klientelu, jinak nastavené firemní procesy, někdo radši makové, jiný tvarohové koláče… Podívejte se co si o tom myslí ostatní. Ale stručně a obecně pro mě srovnání vychází takto:

  • Rozšířenost — Tady zatím vede Bootstrap. Přišel jako první a vede v počtu související informací, nástrojů, ale soudě podle účastníků všech školení i počtu vývojářů, kteří se jim v ČR zabývají.
  • Technická vyspělost — Foundation se v poslední době vyvíjí rychleji a přináší více inovativních prvků. Bootstrap jde dopředu pomaleji a v posledních verzi moc inovací na trhu frontend frameworků nepředvedl.
  • Rychlost učení — Bootstrap tady má myslím navrch i díky využití LESSu, který je pro preprocesory nedotčené kódery přístupnější než SASS/SCSS u Foundation. Autoři Foundation ale v poslední verzi představili spoustu možností, jak se jejich framework naučit rychleji.
  • Podpora starších prohlížečů — Bootstrap s pomocí Respond.js jednoduše zvládne IE8. Foundation v poslední verzi nikoliv.

Pokud jsme v tomhle článku otevřeli pro vás neznámé téma a zároveň nemáte zkušenosti s žádným preprocesorem, sáhněte spíše po Bootstrapu. Pokud se webdesignem ovšem živíte profesionálně, určitě nedoporučuji kterýkoliv z frontend frameworků používat bez CSS preprocesorů.

Výzva k akci na závěr? Jestli jste se v některém ze zmíněných scénářů našli, pak hurá pro frontend framework. Ale scénářů použití bychom pro Bootstrap a Foundation našli daleko víc. Vy zkušenější, neváhejte se do komentářů pochlubit, jak šetří čas právě vám.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 20

Přehled komentářů

mekele
Honza Javorek Re:
iiic akordeón ?
Martin Hassman Re: akordeón ?
ondrej.pelikan.14 Dobrý článek
lenochware
Martin Hassman Re:
lenochware Re:
Martin Michálek Re:
Peter z vesnice bez vodovodu Re:
Vit Klempíř bootstrap
Martin Hassman Re: bootstrap
Antonio
Martin Kupec Re:
Milan Re:
Martin Michálek
honza šablona boostrap
Josef Re: šablona boostrap
Pan Zeleny Nechápu
kelley Re: Nechápu
Zdroj: https://www.zdrojak.cz/?p=10585