1. diel - Úvod do CSS frameworku Bootstrap

Vítame všetkých webdesignerov, či už tých skúsených, ktorí poznajú naspamäť pomaly všetky CSS vlastnosti, tak aj tých neskúsených, ktorí s webdesignom ešte len začínajú. V tomto on-line kurze sa naučíme používať CSS framework Bootstrap, ktorý sa masovo rozšíril ako medzi tých, ktorí webdesign milujú, tak aj medzi tých, ktorí ho dvakrát nemusia. V oboch prípadoch totiž dosiahneme perfektné výsledky s minimálnym snažením a získame čas venovať sa dôležitejším častiam webu, než je napr. štylovanie 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 Webovej 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) 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ú veľmi rýchlo a efektívne vytvoriť tie časti aplikácií, na ktoré sú určené. 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ž definujeme ten istý rámček pre tabuľku v desiatom projekte, nutne nás napadne vytvoriť si nejakú knižnicu, kam si tie najpoužívanejšie štýly uložíme. Knižnicu budeme 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 č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 podobne. Keď je potom 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 (novo X). 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ôž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 na 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 naš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ôž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 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 - 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 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. Prípadne sa o gride 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, o level lepší však nájdete napr. na webe https://startbootstrap.com/, kde sú k dispozícii nádherné hotové šablóny. Teda nie iba kostry, ale naozaj hotové weby s moderným designom, ktoré stačí len upraviť. Všetky sú samozrejme responzívne, mobile-first a zadarmo. Najčastejšie sú pod Apache licenciou, kedy nie je ani treba uviesť autora. Osobne ho však spomínam do pätičky, príde mi to fér:) Nájsť sa dajú samozrejme aj platené šablóny a to obvykle vysoko profesionálne a len za niekoľko sto Sk. 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 webov). Táto práve nie je zo startbootstrap, ale je dostupná zadarmo na githubu:

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 štyluje ako animované prepínače. Schéma 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čí 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.

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 web sám je vytvorený v Bootstrape

Layouty

Vytvoriť rozloženie stránky (layout) je pomerne zložité. To nie je priamo chyba Bootstrapu, ale všeobecný fakt. Je tu potrebné definovať veľa vecí vrátane responzívneho menu, formulára na vyhľadávanie, pätičky a podobne. To všetko na bežnej stránke náš používateľ alebo zákazník očakáva. A Bootstrap je o CSS štýloch, HTML kostru by sme si museli stále sami napísať. Aj to však Bootstrap elegantne vyriešil a ponúkol hneď niekoľko najčastejšie používaných layoutov ako kostry webov 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.

Alternatívne si môžeme zvoliť nejakú hotovú šablónu rovno z 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:

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

Bootstrap je možné používať okrem stiahnutím šablóny s ním aj nalinkovaním jeho kódu z CDN úložiska. Oveľa lepšie však je 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ý nápad 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 budúcej 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š.