Material Design Lite

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.

Be74fd9a577ea5ef1ab2e7c71bcfa4b5?s=128

Djalma Araújo

October 17, 2015
Tweet

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
  10. None
  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

  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  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