Co je Bootstrap a jak na něj: - Kdy použít - Jak použít - Prototypování s Boo

1. Bootstrap
Frontendisti 26. 6. 2014, Brno

2. 1. Co je Bootstrap
2. Kdy použít
3. Jak použít
4. Prototypování
5. Triky

4. 1.0 – srpen 2011
2.0 – srpen 2012 – „responzivita“
3.0 – srpen 2013 – mobile first, plně responzivní
4.0 – srpen 2014?

6. Framework
×
UI knihovna
Podle Harryho Robertse

7. Framework
• Koncept, nikoli finální produkt
• Vede práci a pomáhá při rozhodování
• Malá část projektu
• Gets the job started

8. UI knihovna
• Použití tak, jak je (out of box)
• Prototypování
• Přímá implementace
• Gets the job done

9. ?

10. Framework
×
UI knihovna

11. Framework
&
UI knihovna

12. —Zvídavý kodér
„Proč zrovna Bootstrap?“

13. • Solidní základ pro středně velký projekt
• Slušný responzivní grid
• Flexibilita
• LESS / SASS
• Rozšíření ve světě
• Aktivní vývoj

14. Kdy použít

20. 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

21. Jak použít

24. Bower
+
LESS

25. Bower + LESS
• Úpravy proměnných
• Rozšíření komponent
• Vlastní komponenty
• Kompletní JS

33. 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

36. Protypování

37. Cíle
• Rychlost
• Co nejméně práce
• Co nejlepší výsledek

38. Prostředky
• Yeoman
• Bootstrap
• BrowserSync
• Projektor
• Git

39. 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

40. Předpoklady
• Zručný kodér

46. Triky

47. • „Přetěžování“ proměnných
• Postupně se zbavovat frameworku
• BEM – Bootstrap třídy jako mixiny

48. Díky!
!
@AdamKudrna
www.adamkudrna.cz