Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bootstrap
Frontendisti 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 star...
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ě
• Ak...
Kdy použít
ANO – komplet: administrace, prototypy
ANO – částečně: prezentační weby pro
Bootstrap navržené
NE – microsites a jednoduch...
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...
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 m...
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
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
Upcoming SlideShare
Loading in …5
×

Bootstrap – Frontendisti 26. 6. 2014, Brno

842 views

Published on

Co je Bootstrap a jak na něj:

- Kdy použít
- Jak použít
- Prototypování s Boo

Published in: Software
  • Be the first to comment

  • Be the first to like this

Bootstrap – Frontendisti 26. 6. 2014, Brno

  1. 1. Bootstrap Frontendisti 26. 6. 2014, Brno
  2. 2. 1. Co je Bootstrap 2. Kdy použít 3. Jak použít 4. Prototypování 5. Triky
  3. 3. 1.0 – srpen 2011 2.0 – srpen 2012 – „responzivita“ 3.0 – srpen 2013 – mobile first, plně responzivní 4.0 – srpen 2014?
  4. 4. Framework × UI knihovna Podle Harryho Robertse
  5. 5. Framework • Koncept, nikoli finální produkt • Vede práci a pomáhá při rozhodování • Malá část projektu • Gets the job started
  6. 6. UI knihovna • Použití tak, jak je (out of box) • Prototypování • Přímá implementace • Gets the job done
  7. 7. ?
  8. 8. Framework × UI knihovna
  9. 9. Framework & UI knihovna
  10. 10. —Zvídavý kodér „Proč zrovna Bootstrap?“
  11. 11. • Solidní základ pro středně velký projekt • Slušný responzivní grid • Flexibilita • LESS / SASS • Rozšíření ve světě • Aktivní vývoj
  12. 12. Kdy použít
  13. 13. 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
  14. 14. Jak použít
  15. 15. Bower + LESS
  16. 16. Bower + LESS • Úpravy proměnných • Rozšíření komponent • Vlastní komponenty • Kompletní JS
  17. 17. 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
  18. 18. Protypování
  19. 19. Cíle • Rychlost • Co nejméně práce • Co nejlepší výsledek
  20. 20. Prostředky • Yeoman • Bootstrap • BrowserSync • Projektor • Git
  21. 21. 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
  22. 22. Předpoklady • Zručný kodér
  23. 23. Triky
  24. 24. • „Přetěžování“ proměnných • Postupně se zbavovat frameworku • BEM – Bootstrap třídy jako mixiny
  25. 25. Díky! ! @AdamKudrna www.adamkudrna.cz

×