1. diel - Úvod do CSS frameworku Bootstrap

Vítam všetky webdesignerov, či už tých skúsených, ktorí poznajú naspamäť pomaly všetky CSS vlastnosti, tak aj tie neskúsené, ktorí s webdesignom len začínajú. V tomto on-line kurzu sa naučíme používať CSS framework Bootstrap, ktorý sa masovo rozšíril ako medzi tých, ktorí webdesign milujú, tak i medzi tých, ktorí ho dvakrát nemusí. V oboch prípadoch totiž dosiahnete perfektné výsledky s minimálnym snažením a získate čas venovať sa dôležitejším častiam webu, než. je napr. štýlovanie tabuľky. Ale vezmime to všetko od začiatku.

Čo je to framework?

V minulosti dochádzalo k pomerne búrlivému zdokonaľovanie jazykov, ako tých programovacích, tak tých značkovacích (HTML) a prípadne ďalších, napr. Stylovacího 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. I sa najdokonalejšom nástrojmi však musíme stále pracovať, napr. V CSS musíme pre každý náš projekt znovu a znovu 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 nastylované 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 znovu a znovu. Webdesign je predsa o nápade a nie o opisovanie rámčeku tabuľky alebo definovanie, že zľava má byť zelene. To je plytvanie vaším časom. A že by každý web mal mať unikátny dizajn? To síce áno, ale v naprostej väčšine prípadov stačí len drobne 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 naprostú 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 dokopy 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

Zamestnanca Twitteri trápila nekonzistencie rôznych aplikácií vo firme, ich vzhľad bol odlišný a bola nutná znalosť konkrétneho štýlu k ich úprave. 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úce 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úži 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ôžete vytvoriť aj svoj vlastný, avšak v tomto kurze sa budeme venovať práve už existujúcemu Bootstrap. Budete pracovať rýchlejšie a lacnejšie. Čo viac si priať?

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

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

• Responzivita - Bootstrap štýly sú dokonale prispôsobené pre mobilné zariadenia. Je teda 100% responzívne. A práve mobilné telefóny sú v dnešnej dobe na webe už častejšie zariadení, 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ža a in. A keď sa trend zmení, môžete si byť istí, že Bootstrap na to zareaguje. A ak sa vám flat predsa len nepáči, môžete si stiahnuť akékoľvek iné zo schém, ktoré sú pre Bootstrap dostupná (pozri ďalej).
• Grid - Obsahuje dvanáctisloupcový grid systém. Ak už poznáte výhody grid systému, viete, že vo väčšine prípadov úplne nahradí pozicovanie elementov na stránke, ktoré je potom navyše pravidelné a responzívne. Prípadne sa o gridu dozviete ďalej v tomto kurze.
• Je zadarmo - Bootstrap je zadarmo aj pre komerčné účely.

Startbootstrap.com

Priamo Bootstrap síce ponúka nejaké základné šablóny, o level lepšie však nájdete napr. Na webe https://startbootstrap.com/, kde máte k dispozícii nádherné hotové šablóny. Teda nie jednoduché kostry, 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 Apache licenciou, kedy nie je ani potrebné 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 zvyčajne vysoko profesionálny a len za niekoľko sto Sk. To je oproti tvorbe šablóny na zákazku len zlomok ceny.

Šablóna pre landing page zo startbootstrap .<>

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

Responzívne 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é sekcie webov). Táto zrovna nie je zo startbootstrap, ale je dostupná zadarmo na GitHub:

Dashboard schéma Gentella pod licenciou MIT (zdarma).

Material design

Určite ste sa už niekedy stretli s populárnym material dizajnom, 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, guľaté rohy, obdĺžniková a kruhová tlačidlá a napr. Checkboxy vo formulároch štýlom ako animované prepínače. Schéma material dizajnu pre Bootstrap nájdete na https://mdbootstrap.com. Môžete tak spojiť jednoduchosť Bootstrap s nádherným vzhľadom od Google. Samozrejme existujú ďalšie a ďalšie schémy, stačí zagooglit, aj portov material dizajnu pre Boostrap je hneď niekoľko.

Niektoré formulárové prvky material dizajnu (.mdb) pre Bootstrap .<>

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

Hello world

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

Layouty

Vytvoriť rozloženie stránky (layout) je pomerne zložité. To nie je priamo chyba Bootstrap, ale všeobecný fakt. Je tu potreba definovať veľa vecí vrátane responzivního menu, formuláre pre vyhľadávanie, pätičky a podobne. To všetko na bežnej stránke náš uží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 přichystaným Bootstrap k stiahnutiu. Na webe prejdite na záložku Examples a vyberte si nejaké rozloženie, ktoré sa vám páčia. Ja si zvolím Jumbotron, v ktorom upravím texty a obsah. Môžete si tiež zvoliť nejakú hotovú šablónu rovno z startbootstrap­.com. Ako pridávať ďalší obsah si ukážeme počas kurzu. Web getboostrap bohužiaľ z nejakého dôvodu neumožňuje stiahnutie týchto ukážok a musí sa stiahnuť celý balík (odkaz na stránke Examples hore), kde sú jednotlivé ukážky potom v priečinku docs/[vaše_verze]/examples, tá má je v zložke "jumbotron".

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

Neskôr je vhodné upraviť odkazy na zdroje v šablóne tak, aby boli v tej istej zložke ako je šablóna a nevyžadovali ďalšie nadradené zložky, ktoré sú nad zložkou examples.

Bootstrap možné používať okrem stiahnutím šablóny s ním tiež nalinkováním jeho kódu z CDN úložiska. Osobne mi však príde oveľa lepšie vychádzať už z predpripravené šablóny a mať zároveň všetky súbory uložené pri sebe. 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 vá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 nájdete mnou upravenú šablónu Jumbotron, ale stiahnite si radšej aktuálne Bootstrap priamo z webu. V budúcej lekcii, Bootstrap - Reboot , sa budeme venovať základným štýlom Bootstrap 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š.