Devel.cz: Bootstrap 4
•
1 like•960 views
Vývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
Recommended
More Related Content
Similar to Devel.cz: Bootstrap 4
Similar to Devel.cz: Bootstrap 4 (20)
More from Martin Michálek
More from Martin Michálek (20)
Devel.cz: Bootstrap 4
- 1. Bootstrap 4: Jednou to přijít muselo Devel.cz 2018 Martin Michálek @machal
- 2. Martin Michálek: frontend designér, poradce @machal
- 3. 1. Toto trvalo! 2. Co nového? 3. Užitkové třídy 4. Kam s ním? 5. Systém designu Bootstrap 4 @machal
- 4. Bootstrap 4 @machal 1. Toto trvalo! 2. Co nového? 3. Užitkové třídy 4. Kam s ním? 5. Systém designu
- 10. Bootstrap 4 @machal 1. Toto trvalo! 2. Co nového? 3. Užitkové třídy 4. Kam s ním? 5. Systém designu
- 11. Co nového? Sass Flexbox rem Reboot Staré IE Čistka Frontend Tooling Survey 2018
- 12. Co nového? Sass Flexbox rem Reboot Staré IE Čistka
- 13. Co nového? Sass Flexbox rem Reboot Staré IE Čistka 04/2015
- 14. Co nového? Sass Flexbox rem Reboot Staré IE Čistka https://cdpn.io/e/dJxBGz 2018
- 15. Co nového? Sass Flexbox rem Reboot Staré IE Čistka font-size: 16px ❌ ✔ rem em Podle rodiče?Podle dokumentu? font-size: 125% <html>
- 16. Co nového? Sass Flexbox rem Reboot Staré IE Čistka
- 17. Co nového? Sass Flexbox rem Reboot Staré IE Čistka 1. Normalize.CSS už dnes nemusí být potřeba 2. Native font stack – písmo podle systému 3. Vše na rem 4. Rytmus podle margin-bottom
- 18. Co nového? Sass Flexbox rem Reboot Staré IE Čistka
- 19. Co nového? Sass Flexbox rem Reboot Staré IE Čistka ❌ ✔
- 20. Inovace?
- 21. Technické inovace? V tomhle oboru už nejsou na místě. Inovace? Ale proč?
- 22. Bootstrap 4 @machal 1. Toto trvalo! 2. Co nového? 3. Užitkové třídy 4. Kam s ním? 5. Systém designu
- 23. http://tachyons.io/ <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#"> Button Text </a> Užitkové třídy: Tachyons
- 25. Užitkové třídy jsou skvělé když… • …je používáte jen pro vybranou sadu vlastností • …chcete co nejrychleji chcete tvořit UI • …chcete psát co nejméně CSS
- 26. Užitkové třídy: Responzivní Media Object https://cdpn.io/e/mqmNyz
- 27. Užitkové třídy dělají z Bootstrapu úplně nový nástroj. Užitkové třídy
- 28. Bootstrap 4 @machal 1. Toto trvalo! 2. Co nového? 3. Užitkové třídy 4. Kam s ním? 5. Systém designu
- 30. Kam s ním? expo.getbootstrap.com Bootstrap Expo? Je to galerie krásných, skvělých a kreativních webů, které používají… layoutovou mřížku z Bootstrapu. Ano, nedělám si srandu, více toho většinou z Bootstrapu nemají.
- 31. On to chtěl klient. On to chtěl klient. On to chtěl klient. „Proč Bootstrap na tom webu používáte?“
- 32. „Proč Bootstrap na tom webu používáte?“ Dávalo smysl na něm postavit design webu. Domluvili jsme se s designérem a využíváme velkou část komponent frameworku. Správná odpověď:
- 33. Aplikace + Bootstrap = ❤ Weby + Bootstrap = 💔
- 34. Bootstrap 4 @machal 1. Toto trvalo! 2. Co nového? 3. Užitkové třídy 4. Kam s ním? 5. Systém designu
- 36. Co je špatně?
- 37. Co je špatně? No jasně – červené tlačítko. Autor ho použil asi proto, že se mu líbilo. Jenže ono má zcela jiný význam – upozornění na možnost něco smazat.
- 38. Systém designu Web 1 Web 2 Web Android iOS UI knihovny
- 39. Systém designu Web Android iOS Web 1 Web 2 UI knihovny
- 41. Tlačítka v Material Design
- 42. Tlačítka v Material Design
- 43. Systém designu Web Android iOS Web 1 Web 2 UI knihovny
- 44. Tlačítka v Material Design
- 45. Bootstrap 4 je pořád nejpropracovanější UI knihovna pro web. — Ale začíná mu chybět systém designu.
- 46. Bootstrap 4 FAQ 1. Zkusit? → Ano! 2. Přejít z v3? → Podle náročnosti. 3. Chcete systém designu? → Material Design. 4. Propracovanost a dokumentace? → Bootstrap. @machal