Material Design Lite

Learn about Material Design Lite, the Front-end implementation of the Google's Material Design Visual Language. Pros/Cons, Tips in a real use case.

Transcript

1. Material Design LITE by Google (getmdl.io)
2. Djalma Araújo @djalmaaraujo djalma@nossomos.cc
3. - MD Design Concept - MD Community/Google Implementations - Why MDL? - MDL Concept - MDL Components - Getting Started - Use Case - What's next? - Production Ready? - What now? - Awesome Links Agenda
4. Material Design
5. We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. Material Design
6. Why?
7. ~32 Public Products
8. “Google products have always had inconsistent design and lacked rules that make sense.” https://medium.com/@CreativeTim/how-google-fails-at-implementing-its-own-material- design-44bbbf9f6c52
9. Material Design 1. Material is the metaphor to the real world 2. Bold, graphic, intentional 3. Motion provides meaning https://www.google. com/design/spec/material-design
11. * Video link on links page (3th link)
12. Community/Google Implementations
13. Polymer Paper Elements
14. Angular Material Angular Material
15. Material UI - React
16. Materialize
17. MUI
18. Bootstrap Material Design by fezvrasta
19. But wait.. Angular Material? Material Design Lite? Polymer Elements? Web Starter Kit?
20. Take it easy.. Angular Material for Angularjs Material Design Lite for static websites / or not Polymer for web components Polymer Starter Kit to get you up and running Web Starter Kit to get you up and running
21. So, Why MDL? Safe choice for now
22. Material Design LITE github.com/google/material-design-lite getmdl.io
23. MDLite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.
24. MDL Components What we have for now
25. MDL Components
37. Getting Started
38. Getting Started / Hosted
39. Getting Started / Download and use
40. Getting Started / Build
41. Getting Started / Bower Install
42. Getting Started / NPM Install
43. Use Case
44. Checkin
45. Check In / Eventos
46. Check In / Login
47. Check in / Eventos / Check in!
48. Check in / Eventos / Detalhe do Usuário
49. Use Case / Cons
50. 1. Dynamic Content - Angular + MDL Sucks
51. 2. Lack of Components - Only 11 Components Created. - Expected: ~30 - Others implementations has more components - Eventick Check In Dialogs - Eventick Check In Snackbar
52. 3. Goal of the MDL - What we should expect for the future? - Only for small / static apps?
53. 4. Too young - Material Design is too recent - MDL is even more
54. 5. Code Coverage - Not everything is tested - Missing edge cases
55. Use Case / Pros!
56. 1. Made by Google - Solid company behind
57. 2. Sass <3 - CSS Pre-processors rocks
58. 3. BEM – Block Element Modifier - Easy - Modular - Good for extensibility - Easy to create new MDL components
59. 4. No Dependencies - Framework Agnostic
60. 5. Browser Support - A-grade browsers are fully supported. B-grade browsers will gracefully degrade to our CSS-only experience.
61. 6. Javascript for all - Native Javascript - Uses gulp - Uses bower - Front-end People (L)
62. 7. Google CDN \o/ - Fast - Reliable - Awesome uptime
63. Hey! Worth Mentioning! https://github.com/jadjoubran/angular-material-design-lite
64. Angular Material Design Lite
65. What’s next?
66. - Lists - Bug Fixes - SnackBars/Toast - Better JS Documentation - Date and Time Pickers - Launch Screens - Subheaders https://github.com/google/material-design-lite/milestones Milestones / v1.1 / v2
67. Production Ready?
68. Google Services
69. Google Rich Media Gallery
70. Now, what?
71. Create something
72. Break Something
73. Contribute to something +1
74. Make a presentation later :)
75. Thanks!
76. - Material Design Lite Website (http://getmdl.io) - MDL Github Repository (https://github.com/google/material-design-lite/tree/master/test) - Material Design (https://www.youtube.com/watch?v=Q8TXgCzxEnw) - Making Material Design (https://www.youtube.com/watch?v=rrT6v5sOwJg) - Angular Material vs MDL (https://scotch.io/bar-talk/angular-material-vs-material-design-lite) - Polymer Project (http://polymer-project.org) - Material UI (http://material-ui.com) - Materialize CSS (http://materializecss.com) - Angular Material (http://material.angularjs.org) - MUI CSS (https://www.muicss.com/) - Web Starter Kit (https://developers.google.com/web/tools/starter-kit/) - Google Products (http://www.google.com/about/products/) Awesome Links