Lekce 1 - Úvod do CSS frameworku Bootstrap

Vítáme všechny webdesignéry, a to jak ty zkušené, kteří znají nazpaměť téměř všechny CSS vlastnosti, tak i ty nezkušené, kteří s webdesignem teprve začínají. V tomto on-line kurzu se naučíme používat CSS framework Bootstrap. Ten se masově rozšířil jak mezi milovníky webdesignu, tak mezi ty, kterým k srdci příliš nepřirostl. V obou případech totiž dosáhneme perfektních výsledků s minimálním snažením a získáme čas věnovat se důležitějším částem webu, než je např. stylování tabulky.

Kurz je koncipován jako praktický manuál k frameworku Bootstrap. Nebudeme se tedy učit novou technologii, ale přehledně si ukážeme komponenty tohoto frameworku a naučíme se je používat. Každý blok pak uzavírají praktická cvičení, ve kterých si nové znalosti ihned ověříte a komponenty si sami vyzkoušíte na příkladech z praxe

Minimální požadavky kurzu

K úspěšnému absolvování kurzu jsou nutné znalosti nejméně v rozsahu našeho kurzu Webové stránky krok za krokem.

Co je to framework?

V minulosti docházelo k poměrně bouřlivému zdokonalování jazyků, a to jak programovacích, tak značkovacích (HTML) či stylovacích, jako je CSS. Postupem času se jednotlivé jazyky v mnoha ohledech ustálily a dnes umožňují velmi rychlé a efektivní vytváření částí aplikací, pro které jsou určeny. I se sebedokonalejšími nástroji ovšem musíme stále pracovat. Kupříkladu v CSS musíme pro každý projekt znovu a znovu definovat úplně základní styly, tedy např. to, že tabulka má mít rámeček nebo že tlačítko má být barevný obdélník. Elementy v prvních verzích jazyka HTML totiž nijak nastylované nebyly a kvůli zpětné kompatibilitě to již není možné změnit.

Když pak definujeme tentýž rámeček pro tabulku v desátém projektu, nutně nás napadne vytvořit si nějakou knihovnu, kam bychom si ty nejpoužívanější styly uložili. Knihovnu poté zkopírujeme do dalších projektů a rázem zde budou styly dostupné bez nutnosti ztrácet čas jejich definováním znovu a znovu. Webdesign je přece hlavně záležitostí nápadů, a ne opisování rámečku tabulky nebo definování, že sleva má být zeleně. To je plýtvání časem. A že by každý web měl mít unikátní design? To sice ano, ale v naprosté většině případů stačí jen drobně upravit ten základní – tabulky budou mít na většině webů rámečky, tlačítka budou většinou obdélníková a podobně. Když je pak knihovna dostatečně velká, že poskytuje styly pro naprostou většinu částí současných webových stránek, říkáme jí framework. Framework je tedy ucelená knihovna nebo sada knihoven, které dohromady dávají hotové řešení. A takovou CSS knihovnu vytvořili v roce 2011 ve firmě Twitter (nově X). Dnes je známá jako framework Bootstrap a je nejpopulárnějším CSS frameworkem na světě.

Twitter Bootstrap

Zaměstnance Twitteru trápila nekonzistence různých aplikací ve firmě, jejich vzhled byl odlišný a byla nutná znalost konkrétního stylu k jejich úpravě. Proto začali pracovat na univerzálním CSS frameworku, který firma nakonec uvolnila jako open-source. To znamená, že tento framework můžeme volně používat i ke komerčním účelům a nemusíme to ani nikde uvádět. Bootstrap se stal značkou, která zaručuje moderní a dobře fungující kabát pro web, na němž je framework použitý. Největší výhodou je však obrovské množství volně dostupných šablon, které jsou nápadité, vzhledově velmi rozmanité a po menší úpravě poslouží jako fungující základ pro naši práci. Začít používat CSS framework znamená pro vývojáře podobný posun, jako když se kdysi přešlo od psaní stylů přímo do HTML, jak se to dělalo v roce 1995, k používání CSS. Framework si samozřejmě můžete vytvořit i svůj vlastní, nicméně v tomto kurzu se budeme věnovat právě již existujícímu Bootstrapu. Budeme pracovat rychleji a levněji. Co více si přát?

Je responzivní, mobile-first a flat

Bootstrap kopíruje ty nejmodernější trendy ve webdesignu. Ty nejdůležitější jsou:

• Responzivita – Bootstrap styly jsou dokonale přizpůsobené pro mobilní zařízení. Framework je tedy stoprocentně responzivní. A právě mobilní telefony jsou v dnešní době na webu již častější zařízení než klasické počítače. Určitě nechceme, abychom přišli o zákazníky jen proto, že někdo otevřel naše stránky na mobilním telefonu, ale písmo je tak malé, že jej uživatel nemůže přečíst.
• Mobile-first – Framework byl ve verzi 3 kompletně přepsán, aby podporoval mobile-first přístup. Jeho kód je tak kompaktnější a podporuje dobré praktiky.
• Flat design – Co dnes není flat? Náš web bude vypadat svěží a in. A když se trend změní, můžeme si být jistí, že Bootstrap na to zareaguje. A pokud se nám flat přece jen nelíbí, můžeme si stáhnout jakékoli jiné ze schémat, která jsou pro Bootstrap dostupná (viz dále).
• Grid – Obsahuje dvanáctisloupcový grid systém. Pokud již znáte výhody grid systému, víte, že ve většině případů úplně nahradí pozicování elementů na stránce, které je potom navíc pravidelné a responzivní. Případně se o gridu dozvíte dále v tomto kurzu.
• Je zdarma – Bootstrap je zdarma i pro komerční účely.

Startbootstrap.com

Přímo Bootstrap sice nabízí nějaké základní šablony, o úroveň lepší ovšem naleznete např. na webu https://startbootstrap.com/, kde jsou k dispozici nádherné hotové šablony. Tedy ne pouhé kostry, ale opravdu hotové weby s moderním designem, které stačí jen upravit. Všechny jsou samozřejmě responzivní, mobile-first a zdarma. Nejčastěji jsou šířeny pod licencí Apache, která ani nevyžaduje uvedení autora. Osobně jej však zmiňujeme do patičky, co nám připadá férové Najít se dají samozřejmě i placené šablony, a to obvykle vysoce profesionální a jen za několik set korun, což je oproti tvorbě šablony na zakázku jen zlomek ceny.

Ukažme si ještě nějakou šablonu pro dashboardy (administrační sekce webů). Tato zrovna nepochází ze Start Bootstrap, ale je dostupná zdarma na GitHubu:

Dashboard schéma Gentelella pod licencí MIT (zdarma)

Material design

Určitě jste se již někdy setkali s populárním material designem, jejichž guidelines vydal Google, který tento vzhled používá ve všech svých produktech. Vzhled je flat, ale používá stíny, kulaté rohy, obdélníková a kruhová tlačítka a např. checkboxy ve formulářích styluje jako animované přepínače. Schéma material designu pro Bootstrap naleznete na https://mdbootstrap.com. Lze tak spojit jednoduchost Bootstrapu s nádherným vzhledem od Googlu. Na internetu jsou samozřejmě dostupná i další schémata a také porty material designu pro Bootstrap.

Projekt Hello world

Nyní si Bootstrap vyzkoušíme. Asi nejdůležitější základnou pro nás bude oficiální web getbootstrap.com. Určitě nás nepřekvapí, že web sám je vytvořený v Bootstrapu

Layouty

Vytvořit rozložení stránky (layout) je poměrně složité. To není chyba přímo Bootstrapu, ale obecný fakt. Je zde potřeba definovat spoustu věcí včetně responzivního menu, formuláře pro vyhledávání, patičky a podobně. To vše na běžné stránce náš uživatel nebo zákazník očekává. Bootstrap však řeší CSS styly, HTML kostru bychom si museli stále sami napsat. Bootstrap tento problém naštěstí elegantně vyřešil a nabízí hned několik nejčastěji používaných layoutů jako kostry webů s přichystaným Bootstrapem ke stažení.

Nyní si všechny ukázkové příklady stáhneme a jeden z nich dále upravíme. Přejdeme na web getbootstrap.com, v menu zvolíme Examples a klikneme na tlačítko Download examples, čímž provedeme stažení. V dalším kroku si stažený archiv rozbalíme, v IDE (například ve VS Code) otevřeme složku jumbotron/ a obsah upravíme do následující podoby:

Zmenšením okna prohlížeče si můžeme vyzkoušet, že web je opravdu responzivní:

Bootstrap lze používat nejen tak, že ho stáhneme společně se šablonou, ale také nalinkováním jeho kódu z CDN úložiště. Mnohem lepší je však vycházet právě z již předpřipravené šablony a mít zároveň všechny soubory uložené na počítači/serveru. V minulosti se již několikrát stalo, že CDN velkých společností byla přetížená, nebo dokonce na několik hodin vypadla. A to pro nás znamená zbytečnou ztrátu zákazníků.

Nyní jsme si udělali velmi dobrou představu o tom, co Bootstrap umí a proč je dobrý nápad CSS frameworky využívat. V příloze je k dispozici naše upravená šablona, ale stáhněte si raději aktuální Bootstrap přímo z webu.

V příští lekci, Bootstrap - Reboot, se budeme věnovat základním stylům Bootstrapu a ukážeme si, jak je používat.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.