1. diel - Úvod do CSS frameworku Bootstrap

Vítame všetkých web dizajnérov, či už tých skúsených, ktorí poznajú naspamäť pomaly všetky CSS vlastnosti, ale aj neskúsených, ktorí s web dizajnom ešte len začínajú. V tomto online kurze sa naučíme používať CSS framework Bootstrap, ktorý sa značne rozšíril rovnako medzi milovníkmi web dizajnu, ale aj tými, ktorí ho dvakrát nemusia. V oboch prípadoch totiž dosiahneme perfektné výsledky s minimálnou snahou a získame čas venovať sa dôležitejším častiam webu, než je napr. štýlovanie tabuľky. V kurze sa naučíme okrem iného používať základné komponenty frameworku:

Minimálne požiadavky kurzu

Pre úspešné absolvovanie kurzu sú potrebné znalosti najmenej v rozsahu nášho kurzu Webové stránky krok za krokom.

Čo je to framework?

V minulosti dochádzalo k pomerne búrlivému zdokonaľovaniu jazykov, ako programovacích, tak značkovacích (HTML), prípadne ďalších, napr. štýlovacieho jazyka CSS. V priebehom času začali byť jazyky v určitom ohľade už "hotové" a teraz umožňujú veľmi rýchlo a efektívne vytvoriť tie časti aplikácií, na ktoré sú určené. Aj s tými 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štýlované neboli a kvôli spätnej kompatibilite sa to už nesmie nikdy zmeniť. Keď si definujeme ten istý rámček pre tabuľku v desiatom projekte, napadne nás vytvoriť si nejakú knižnicu, kam si tie najpoužívanejšie štýly uložíme. Knižnicu budeme kopírovať do svojich projektov a tak budeme mať k dispozícii štýly bez nutnosti strácať čas ich definovaním znova a znova. Web dizajn je predsa o nápadoch a nie o opisovaní rámčeka tabuľky alebo definovaní, že zľava má byť označená zelenou. To je plytvanie časom. A že má mať každý web jedinečný dizajn? To síce áno, ale v prevažnej väčšine prípadov stačí len trochu upraviť ten základný; tabuľky budú mať na väčšine webov rámčeky, tlačidlá budú väčšinou obdĺžnikové a podobne. Keď je potom knižnica dostatočne veľká, a poskytuje štýly pre prevažnú väčšinu častí aktuálnych webových stránok, nazývame ju framework. Framework je teda ucelená knižnica alebo súbor knižníc, ktorý dáva dohromady hotové riešenie. A takú CSS knižnicu vytvorili v roku 2011 vo firme Twitter (aktuálne X). Dnes je známa ako framework Bootstrap a je najpopulárnejším CSS frameworkom na svete.

Twitter Bootstrap

Zamestnancov Twitteru trápila neukonzistencia rôznych aplikácií vo firme; ich vzhľad sa líšil a na ich úpravu bola nutná znalosť konkrétneho štýlu. Preto začali pracovať na univerzálnom CSS frameworku, ktorý firma nakoniec prestavila ako open-source. To znamená, že ho môžeme voľne používať aj na komerčné účely a nemusíme to ani nikde uvádzať. Bootstrap sa stal značkou, ktorá zaručuje moderný a dobre fungujúci "kabát" webu. 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 našej práce. Začať používať CSS framework je pre vývojárov podobný posun ako začať používať CSS a nepísať štýly priamo do HTML, ako sa to robilo v roku 1995. Framework si samozrejme môžete vytvoriť aj svoj vlastný, avšak v tomto kurze sa budeme venovať práve už existujúcemu Bootstrapu. Budete pracovať rýchlejšie a lacnejšie. Čo viac si môžeme priať?

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

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

• Responzivita - Štýly v Bootstrap sú dokonale prispôsobené pre mobilné zariadenia. Je teda 100% responzívny. A práve mobilné telefóny sú v dnešnej dobe na webe už častejšie, než klasické počítače. Určite nechcete, aby ste prišli o zákazníkov len preto, že si niekto otvoril vaše stránky na mobilnom telefóne a písmo je také malé, že ho nedokáž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žo 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 dvanásťstĺpcový grid systém. Pokiaľ už poznáte výhody grid systému, viete, že vo väčšine prípadov úplne nahradí pozíciovanie elementov na stránke, ktoré je potom navyše pravidelné a responzívne. O gride sa viac dozviete ďalej v tomto kurze.
• Je zadarmo - Bootstrap je zadarmo aj na komerčné účely.

Startbootstrap.com

Priamo Bootstrap síce ponúka nejaké základné šablóny, no o level lepšie však nájdete napr. na webe https://startbootstrap.com/, kde sú k dispozícii nádherné hotové šablóny. Teda nie iba základ, ale naozaj hotové weby s moderným dizajnom, ktoré stačí len upraviť. Všetky sú samozrejme responzívne, mobile-first a zadarmo. Najčastejšie sú pod licenciou Apache, kedy nie je ani potrebné uviesť autora. Osobne ju však spomínam v päte, keďže mi to príde fér Nájsť sa dajú samozrejme aj platené šablóny a to obvykle veľmi profesionálne a len za niekoľko eur. To je oproti tvorbe šablóny na zákazku iba zlomok ceny.

Š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 webu). Práve táto nie je zo startbootstrap, ale je dostupná zadarmo na Githube:

Dashboard schéma Gentelella pod licenciou MIT (zadarmo).

Material design

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 štýluje ako animované prepínače. Schému Material Designu pre Bootstrap nájdete na https://mdbootstrap.com. Môžete tak spojiť jednoduchosť Bootstrapu s nádherným vzhľadom od Google. Samozrejme existujú ďalšie a ďalšie schémy, stačí googliť, a 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 vidíme zozadu, druhú spredu a tretia sa práve otáča.

Hello world

Čo by to bolo za úvodný diel, keby sme si Bootstrap nevyskúšali? Asi najdôležitejšou základňou pre nás bude oficiálny web getbootstrap.com. Určite nás neprekvapí, že samotný web je vytvorený v Bootstrape

Layouty

Vytvoriť rozloženie stránky (layout) je pomerne zložité. To však nie je priamo chyba Bootstrapu, ale všeobecný fakt. Je potrebné definovať veľa vecí vrátane responzívneho menu, formulára na vyhľadávanie, päty a podobne. To všetko náš používateľ alebo zákazník očakáva na bežnej stránke. A Bootstrap je o CSS štýloch, takže HTML kostru by sme si museli aj tak napísať sami. Aj to však Bootstrap elegantne vyriešil a ponúkol hneď niekoľko najčastejšie používaných layoutov s prichystaným Bootstrapom na stiahnutie. Na webe prejdeme na záložku Examples a vyberieme si rozloženie. My si zvolíme Jumbotron, v ktorom upravíme texty a obsah.

Prípadne si môžeme zvoliť nejakú hotovú šablónu rovno zo stránky startbootstrap­.com.

Klikneme na tlačidlo Download examples čím stiahneme všetky ukážkové príklady. V ďalšom kroku si stiahnutý archív rozbalíme, v IDE otvoríme zložku jumbotron/ a obsah upravíme do nasledujúcej podoby:

Zmenšením okna prehliadača si môžeme vyskúšať, že web je naozaj responzívny:

Bootstrap je možné používať okrem stiahnutia jeho šablóny aj nalinkovaním jeho kódu z CDN úložiska. Je však oveľa lepšie vychádzať už z predpripravenej šablóny a mať zároveň všetky súbory uložené na počítači/serveri. V minulosti sa už niekoľkokrát stalo, že CDN veľkých spoločností bola preťažená alebo dokonca na niekoľko hodín vypadla. A to pre nás znamená zbytočnú stratu zákazníkov.

Myslím, že sme si urobili veľmi dobrú predstavu o tom, čo Bootstrap vie a prečo je dobré CSS frameworky využívať. V prílohe je naša upravená šablóna, ale stiahnite si radšej aktuálny Bootstrap priamo z webu.

V ďalšej lekcii, Bootstrap - Reboot, sa budeme venovať základným štýlom Bootstrapu a ukážeme si, ako ich používať.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.