Bootstrap – Frontendisti 26. 6. 2014, Brno
•
0 likes•920 views
Co je Bootstrap a jak na něj: - Kdy použít - Jak použít - Prototypování s Boo
Bootstrap – Frontendisti 26. 6. 2014, Brno
- 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. ?
- 12. —Zvídavý kodér „Proč zrovna Ǵdzٲٰ?“
- 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. ʰdzٲDZáí
- 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
- 46. Triky
- 47. • „Přetěžování“ proměnných • Postupně se zbavovat frameworku • BEM – Bootstrap třídy jako mixiny