Lekce 1 - Úvod do CSS frameworku Bootstrap

Vítáme všechny webdesignery, ať již ty zkušené, kteří znají nazpaměť pomalu 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, který se masově rozšířil jak mezi ty, kteří webdesign milují, tak i mezi ty, kteří jej dvakrát nemusí. 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. V kurzu se naučíme mimo jiné používat základní komponenty frameworku:

Minimální požadavky kurzu

Pro úspěšné 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ů, jak těch programovacích, tak těch značkovacích (HTML) a případně dalších, např. stylovacího jazyka CSS. Jak čas běžel, jazyky začaly být v určitém ohledu již "hotové" a nyní umožňují velmi rychle a efektivně vytvořit ty části aplikací, pro které jsou určené. I se sebedokonalejšími nástroji ovšem musíme stále pracovat, např. v CSS musíme pro každý náš projekt znovu a znovu definovat úplně základní styly, tedy ž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ě se to nesmí již nikdy změnit. Když již definujeme ten samý rámeček pro tabulku v desátém projektu, nutně nás napadne vytvořit si nějakou knihovnu, kam si ty nejpoužívanější styly uložíme. Knihovnu budeme kopírovat do svých projektů a rázem zde budou styly dostupné bez nutnosti ztrácet čas jejich definováním znovu a znovu. Webdesign je přeci o nápadu a ne o 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á, tak velká, že poskytuje styly pro naprostou většinu částí současných webových stránek, říkáme ji framework. Framework je tedy ucelená knihovna nebo sada knihoven, která dává dohromady 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 jej 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, kde je použitý. To nejlepší je ale 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 je pro vývojáře podobný posun jako třeba začít používat CSS a nepsat styly přímo do HTML, jako se to dělalo v roce 1995. 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. Budete pracovat rychleji a levněji. Co více si přát?

Je responzivní, je mobile-first, je 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í. Je tedy 100% 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ě nechcete, abyste přišli o zákazníky jen proto, že někdo otevřel vaše stránky na mobilním telefonu a písmo je tak malé, že jej 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? Váš web bude vypadat svěží a in. A když se trend změní, můžete si být jistí, že Bootstrap na to zareaguje. A pokud se vám flat přeci jen nelíbí, můžete 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 zadarmo i pro komerční účely.

Startbootstrap.com

Přímo Bootstrap sice nabízí nějaké základní šablony, o level 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 zadarmo. Nejčastěji jsou pod Apache licencí, kdy není ani třeba uvést autora. Osobně jej však zmiňuji do patičky, přijde mi to fér Najít se dají samozřejmě i placené šablony a to obvykle vysoce profesionální a jen za několik set Kč. To je oproti tvorbě šablony na zakázku jen zlomek ceny.

Šablona pro landing page ze startbootstrap.

Šablona pro mobilní aplikace ze startbootstrap, stačí vyměnit obrázek na displeji.

Responzivní kostra pro e-shopy, kterou jsme použili i v našich kurzech e-shopů (E-shop v ASP.NET, E-shop v PHP a E-shop v Nette).

Ukažme si ještě nějakou šablonu pro dashboardy (administrační sekce webů). Tato zrovna není ze startbootstrap, ale je dostupná zadarmo 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, jehož guidelines vydal Google a 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. Můžete tak spojit jednoduchost Bootstrapu s nádherným vzhledem od Google. Samozřejmě existují další a další schémata, stačí zagooglit, i portů material designu pro Boostrap je hned několik.

Některé formulářové prvky material designu (MDB) pro Bootstrap.

Tzv. flipping cards, po kliknutí se karta plynulou animací otočí a ukáže se její druhá strana. První karta je vidět zezadu, druhá zepředu, třetí se právě otáčí.

Hello world

Co by to bylo za úvodní díl, kdybychom si Bootstrap nevyzkoušeli? 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í přímo chyba 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á. A Bootstrap je o CSS stylech, HTML kostru bychom si museli stále sami napsat. I to ovšem Bootstrap elegantně vyřešil a nabídl hned několik nejčastěji používaných layoutů jako kostry webů s přichystaným Bootstrapem ke stažení. Na webu přejdeme na záložku Examples a vybereme si rozložení. My si zvolíme Jumbotron, ve kterém upravíme texty a obsah.

Alternativně si můžeme zvolit nějakou hotovou šablonu rovnou z startbootstrap­.com.

Klikneme na tlačítko Download examples čímž stáhneme všechny ukázkové příklady. V dalším kroku si stažený archiv rozbalíme, v IDE otevřeme složku jumbotron/ a obsah upravíme do následující podoby:

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

Bootstrap lze používat kromě stažením šablony s ním také nalinkováním jeho kódu z CDN úložiště. Mnohem lepší však je vycházet již z 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ů.

Myslím, že 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 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š.