10. diel - Úvod do Bootstrapu

V minulej lekcii, CSS grid - Princípy a layout, sme si predstavili CSS grid systém a akým spôsobom ho môžeme využiť na tvorbu layoutu webu.

V dnešnej lekcii sa pozrieme na známy framework Bootstrap, z ktorého vychádza FlexBox Grid systém, o ktorom sme si povedali v minulej lekcii.

Čo je to framework?

V minulosti dochádzalo k pomerne búrlivému zdokonaľovaniu jazykov, ako programovacích, tak značkovacích (HTML) a prípadne ďalších, napr. štylovacieho jazyka CSS. Ako čas bežal, jazyky začali byť v určitom ohľade už "hotové" a teraz umožňujú vytvoriť tie časti aplikácií, pre ktoré sú určené, veľmi rýchlo a efektívne.

Aj so najdokonalejšími nástrojmi však musíme stále pracovať, napr. v CSS musíme pre každý náš projekt znova a znova definovať úplne základné štýly, teda že tabuľka má mať rámček alebo že tlačidlo má byť farebný obdĺžnik. Elementy v prvých verziách jazyka HTML totiž nijako naštylované neboli a kvôli spätnej kompatibilite sa to nesmie už nikdy zmeniť.

Keď už definujete ten istý rámček pre tabuľku v desiatom projekte, nutne vás napadne vytvoriť si nejakú knižnicu, kam si tie najpoužívanejšie štýly uložíte. Knižnicu budete kopírovať do svojich projektov a razom tu budú štýly dostupné bez nutnosti strácať čas ich definovaním znova a znova. Webdesign je predsa o nápade a nie o opisovaní rámčeka tabuľky alebo definovaní, že zľava má byť zelene. To je plytvanie vaším časom.

A že by každý web mal mať unikátny design? To síce áno, ale v prevažnej väčšine prípadov stačí len nadrobno upraviť ten základný, tabuľky budú mať na väčšine webov rámčeky, tlačidlá budú väčšinou obdĺžnikové a pod.

Keď je vaša knižnica dostatočne veľká, tak veľká, že poskytuje štýly pre prevažnú väčšinu častí súčasných webových stránok , hovoríme ju framework. Framework je teda ucelená knižnica alebo sada knižníc, ktorá dáva dohromady hotové riešenie. A takú CSS knižnicu vytvorili v roku 2011 vo firme Twitter, dnes je známa ako framework Bootstrap a je najpopulárnejším CSS frameworkom na svete.

Twitter Bootstrap

Zamestnancov Twitteru trápila nekonzistencia rôznych aplikácií vo firme, ich vzhľad bol odlišný a bola nutná znalosť konkrétneho štýlu na ich úpravu. Preto začali pracovať na univerzálnom CSS frameworku, ktorý firma nakoniec uvoľnila ako open-source. To znamená, že ho môžete voľne používať aj na komerčné účely a nemusíte to ani nikde uvádzať.

Bootstrap určite nie je niečo, za čo by ste sa mali hanbiť, naopak sa stal značkou, ktorá zaručuje moderný a dobre fungujúci kabát pre web, kde je použitý. To najlepšie je ale obrovské množstvo voľne dostupných šablón, ktoré sú nápadité, vzhľadovo veľmi rozmanité a po menšej úprave poslúžia ako fungujúci základ pre vašu prácu.

Začať používať CSS framework je pre vývojárov podobný posun ako treba začať používať CSS a nepísať štýly priamo do HTML, ako sa to robilo v roku 1995. Framework si samozrejme môžeme vytvoriť aj svoj vlastný, ale prečo by sme to mali robiť, ak niekto už urobil túto zdĺhavú prácu a dal nám tento framework ako open source ?

Je responzívny, je mobile-first, je flat

Bootstrap kopíruje tie najmodernejšie trendy vo webdesigne. Tie najdôležitejšie sú:

• Responzivita - Bootstrap štýly sú dokonale prispôsobené pre mobilné zariadenia. Je teda 100% responzívna. A práve mobilné telefóny sú v dnešnej dobe na webe už častejšie zariadenia, než klasické počítače. Určite nechcete, aby ste prišli o zákazníkov len preto, že niekto otvoril vaše stránky na mobilnom telefóne a písmo je také malé, že ho nemôže prečítať.
• Mobile-first - Framework bol vo verzii 3 kompletne prepísaný, aby podporoval mobile-first prístup. Jeho kód je tak kompaktnejší a podporuje dobré praktiky.
• Flat design - Čo dnes nie je flat? Váš web bude vyzerať svieži a in. A keď sa trend zmení, môžete si byť istí, že Bootstrap na to zareaguje. A pokiaľ sa vám flat predsa len nepáči, môžete si stiahnuť akékoľvek iné zo schém, ktoré sú pre Bootstrap dostupné (viď ďalej).
• Grid - Obsahuje podobný dvanásťstĺpcový grid systém, ktorý sme si uviedli minule.
• Je zadarmo - Bootstrap je zadarmo aj na komerčné účely.

Ako už teda vieme, bootstrap nám oproti Flexbox Grid systému ponúka navyše aj množstvo štýlov, ktorými môžeme do rôznych formátov štylovať tlačidlá, tabuľky, formuláre, apod. Všetko môžeme nájsť v dokumentácii na oficiálnych stránkach Bootstrapu.

Okrem oficiálnej dokumentácie existujú ešte 2 stránky, ktoré posunuli tvorbu v Bootstrape ešte na trochu vyššiu úroveň. Sú to startbootstrap­.com a mdbootstrap.com, ktoré nám môžu pomôcť začať s frameworkom alebo výrazne uľahčiť prácu so šablónou.

Startbootstrap.com

Na tejto stránke nájdete hotové šablóny, ktoré sú kompletne napísané v Bootstrape, nie je preto potrebné tvoriť celý web od nuly, ale stačí iba poupraviť tieto šablóny. Je dôležité podotknúť, že sú to už weby pripravené na publikáciu. Nie je to teda iba kostra, kde by neboli ani reálne obrázky a informácie. Väčšina šablón je zadarmo, existujú ale aj profesionálne šablóny, ktoré sa pohybujú okolo pár sto korún, takže nie je problém ich pre nejaký projekt zakúpiť. Cena za ich vytvorenie na mieru by bola pravdepodobne niekoľkonásobne väčšia. Poďme sa pozrieť na niektoré ukážky:

Šablóna pre landing page zo startbootstrap.

Šablóna pre mobilné aplikácie zo startbootstrap, stačí vymeniť obrázok na displeji.

Responzívna kostra pre e-shopy, ktorú sme použili aj v našich kurzoch e-shopov (E-shop v ASP.NET, E-shop v PHP a E-shop v Nette).

Ukážme si ešte nejakú šablónu pre dashboardy (administračná sekcia webov). Táto práve nie je zo startbootstrap, ale je dostupná zadarmo na githubu:

Dashboard schéma Gentella pod licencí MIT (zdarma).

Mdbootstrap.com

Určite ste sa už niekedy stretli s populárnym material designom, ktorého guidelines vydal Google a tento vzhľad používa vo všetkých svojich produktoch. Vzhľad je flat, ale používa tiene, okrúhle rohy, obdĺžnikové a kruhové tlačidlá a napr. checkboxy vo formulároch štyluje ako animované prepínače. Schéma material designu pre Bootstrap nájdete na mdbootstrap.com. Môžete tak spojiť jednoduchosť Bootstrapu s nádherným vzhľadom od Google. Samozrejme existujú ďalšie a ďalšie témy, stačí zagooglit, aj portov material designu pre Boostrap je hneď niekoľko:

Niektoré formulárové prvky material designu (MDB) pre Bootstrap.

Tzv. flipping cards, po kliknutí sa karta plynulou animáciou otočí a ukáže sa jej druhá strana. Prvá karta je vidieť zozadu, druhá spredu, tretia sa práve otáča.

Ukážka responzivity

Pre Bootstrap máme tu na sieti kompletnú sekciu článkov. Nás z neho ale zaujíma iba už spomínaný grid systém (na ktorý sa podrobnejšie pozrieme v ďalšej lekcii). S ostatnými vlastnosťami frameworku sa môžete zoznámiť práve vo vyššie spomínanej sekcii. Poďme si teraz ukázať malú ukážku toho, ako dokáže byť Bootstrap krásne responzívny. Presuňme sa spoločne na Examples na oficiálnom webe Bootstrapu.

Ak už nie je posledná verzia 4.5, ako to bolo v čase písania článku, tak si vpravo hore verziu zmeňte na najnovšiu.

Kliknite na akúkoľvek ukážku a ľubovoľne meňte veľkosť okna prehliadača. Teraz by už každému malo byť jasné, v čom spočíva sila Bootstrapu a aká jednoduchá tvorba stránok (alebo len aj šablón) práve s ním:

Takto vyzerá šablóna na veľkom displeji počítača.

Takto vyzerá šablóna na malom displeji telefónu.

Šablónu môžeme už len ľahko upraviť a využiť na vlastnom webe. Bootstrap nám všetko zjednodušil a ušetril drahocenný čas.

V ďalšej lekcii, Grid systém Bootstrapu, sa pozrieme na grid systém od Bootstrapu.