Přejít k navigační liště

Zdroják » Webdesign » K čemu je dobrý Bootstrap a frontend frameworky?

K čemu je dobrý Bootstrap a frontend frameworky?

Články Webdesign

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.

Komentáře

Subscribe
Upozornit na
guest
22 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
mekele

Bootstrap nebo Foundation? HTML5 Boilerplate.

Honza Javorek

Podle mě to jsou dvě různé věci, které se doplňují. Já jsem na posledním projektu použil Bootstrap, ale tu základní šablonu jsem si upravil podle HTML5 Bolierplate.

iiic

Akordeón, to je nějaký druh snippetu? Tenhle výraz jsem ještě neslyšel.

Martin Hassman

Ovládací prvek. Neznám přesnou definici, ale zjednodušeně bychom mohli říct, že je to takový karusel nastojato, kde okolní nevybrané položky jsou ve stavu collapsed.

Více na http://en.wikipedia.org/wiki/Accordion_(GUI) a http://ui-patterns.com/patterns/AccordionMenu

ondrej.pelikan.14

Díky za tento článek. S frontend frameworky jsem zatím žádnou zkušenost neměl, ale musím se do toho pustit (díky tomuto článku). Možností to nabídzí dost a ušetří to hodně práce.

lenochware

Akorát mám pocit, že všechny weby udělané s twitter bootstrapem vypadají úplně stejně. Zdroják, http://nejsmeagentura.cz/ … To už v budoucnu nebude jiný design než twitter?

Martin Hassman

Kde jste našel na Zdrojáku Bootstrap?

lenochware

Ok, nekoukal jsem se na kod. Soudil jsem podle vzhledu, omlouvam se.

Peter z vesnice bez vodovodu

A na tom webe je bug: po kliknuti na „Komu pomůžeme“ v menu sa nastavi ako active polozka v menu „Kontakty“.

Vit Klempíř

Nějak nedokažu pochopit ten bootstrap. Je mi jasne, že se jedna o frondend framework, ale nevim který si mam s těhc tři variant stahnout a taky nevim jak s nim zachazet, respketive jak psat html značky tak aby se mi tvořili odstavce, formulaře, seznamy tak jak ja potřebuju.

Antonio

Já to nějak stále nechápu… proč něco takového používat? http://nejsmeagentura.cz/ je podle mne web na pár řádků kódu a css… ale z článku jsem měl pocit, jak kdyby to byla nějaká složitá operace „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ě.“
Jediné co mi připadalo jako smysluplné využití bylo „jako komunikační nástroj v týmu“, ale jinak tápu v čem by mi to ušetřilo reálně práci oproti prostému psaní kódu.

Martin Kupec

Mě to taky moc nejde. V čistém CSS si dělám někdy od roku 2002, určitě je to někdy drbačka, ale pro moje věci si tam udělám co chci a za tu dobu CSS jakž takž znám. Bootstrap mi přijde jako vrátit se zas na začátek. Hlavně se mi nějak nedaří pochopit princip dokumentace. Příklad – v různých ukázkách na netu vidím třeba třídy .navbar-brand, nebo .navbar-inner a nikde v dokumentaci nejsem schopen najít, co vlastně mají dělat, pokud se nepodívám přímo do stylopisu bootstrapu, nebo nenajdu někde na netu nějaké vysvětlení. Nebo .pull-right/pull-left. Jasně, vidím, že to je float, ale kde to najdu v dokumentaci? Nebo spíš, kde to najde nováček v dokumentaci? Jsem starší kus, angličtina mi leze do hlavy dost neochotně a nemůžu samozřejmě vyloučit, že tu dokumentaci chápu blbě právě z tohoto důvodu.
Na druhé straně je určitě fajn, že nemusím řešit vzhled komponent u každé blbosti, to se mi tam líbí. A pro velké projekty a týmovou práci to bude asi velká pomoc. Ale mě se jako člověku, který CSS ovládá a dělá si víceméně weby jen pro sebe, zatím důvod učit se to, nepodařil najít.

Milan

hlavna vyhoda je v tom, ze ak si urobim napr.: responzivnu sablonu, nemusim riesit testovanie na zobraznie a funkcionalitu cez vsetky mozne aj nemozne browsery a mobilne zariadenia a operacne systemy …

honza

Ahoj přemýšlíme nad redesignem webu electropiknik.cz a hledáme snadné řešení implementace a hlavně jak se říká chceme jít s doubou. jde nám o maximální rychlost, přehlednost, jednoduchost a celkový dojem celého webu. Nevíte nekdo, kde se dá koupit boostrap sablonu jiz s predvytvrenym designem pro magaziny? diky za info

Josef

U webu electropiknik bych spíš přemýšlel o změně obsahu :D Ty esoterický žvásty, vyložený lži a doporučení jak si pomoci do hrobu, design nenapraví O:-)

Pan Zeleny

Ani z http://getbootstrap.com/getting-started/ nelze nic pochopit. Není tam jediný odkaz na dokumentaci a někde se tam píše o nějakém kompilování, ale co to je, to už tam nenapíšou. Takže zase nic. Nechápu existenci frameworků, co to jako má bejt?

kelley

To čtete špatně. To není „kompilování“, ale „komplikování“. Jak se říká „jít s kanónem na vrabce“, tak tady se jde na vrabce rovnou s celou flotilou letadlových lodí. A k tomu se samozřejmě musíte naučit řídit loď a taky ta letadla… to je fuk, že z dřívějška umíte řídit auto, to se nepočítá. Teď se musíte naučit bootstrap, sass, less, jquery a třeba ještě nette a určitě by se ještě nějaký další hodně rozlezlý preprocesoroframeworkátor našel. Pak se s pomocí preprocesoru některých lodí zbavíte a zůstane vám jen jedna, protože to byly právě ty výše zmíněné komplikace. A jedna loď (už bez letadel) přece na vrabce není zas tak veliká :-D Ale bude to pak responzívní a validní :-) Ironii v tom nemusíte hledat – skutečně tam je…;-) Sorry, mně to prostě nedalo… Taky jsem to nepochopil.

Tomáš

Ani já nechápu. Chtěl bych si udělat nový web, ale tohle mi přijde výrazně složitější než si stáhnout nějakou šablonu (třeba http://getskeleton.com/ ) a ten si upravit. Nebo mi něco uniká? Díky, Tomáš

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.