BootstrapFrontendisti 26. 6. 2014, Brno

1. Co je Bootstrap

2. Kdy použít

3. Jak použít

4. Prototypování

5. Triky

1.0 – srpen 2011

2.0 – srpen 2012 – „responzivita“

3.0 – srpen 2013 – mobile first, plně responzivní

4.0 – srpen 2014?

Framework ×

UI knihovna

Podle Harryho Robertse

Framework

• Koncept, nikoli finální produkt

• Vede práci a pomáhá při rozhodování

• Malá část projektu

• Gets the job started

UI knihovna

• Použití tak, jak je (out of box)

• Prototypování

• Přímá implementace

• Gets the job done

?

Framework ×

UI knihovna

Framework &

UI knihovna

—Zvídavý kodér

„Proč zrovna Bootstrap?“

• Solidní základ pro středně velký projekt

• Slušný responzivní grid

• Flexibilita

• LESS / SASS

• Rozšíření ve světě

• Aktivní vývoj

Kdy použít

ANO – komplet: administrace, prototypy

ANO – částečně: prezentační weby pro Bootstrap navržené

NE – microsites a jednoduché weby, weby s kreativní grafikou, opravdu velké projekty

Jak použít

Bower +

LESS

Bower + LESS

• Úpravy proměnných

• Rozšíření komponent

• Vlastní komponenty

• Kompletní JS

Bower + LESS + JS

• Responzivní grid

• LESS – vybrané Bootstrap komponenty

• LESS – vlastní styly

• JS – vybrané Bootstrap komponenty (hotové, přístupné a otestované řešení)

• JS – vlastní skripty

Protypování

Cíle

• Rychlost

• Co nejméně práce

• Co nejlepší výsledek

Prostředky

• Yeoman

• Bootstrap

• BrowserSync

• Projektor

• Git

Výhody

• Efektivní spolupráce kodéra s UX designerem

• Ihned responzivní

• Píšete (téměř) jen HTML, žádné styly

• Kód je možné následně použít – není to práce navíc

Předpoklady

• Zručný kodér

Triky

• „Přetěžování“ proměnných

• Postupně se zbavovat frameworku

• BEM – Bootstrap třídy jako mixiny

Díky! !

@AdamKudrna www.adamkudrna.cz