Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Djalma Araújo

October 17, 2015
Tweet

More Decks by Djalma Araújo

Other Decks in Programming

Transcript

  1. - 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
  2. 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
  3. “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
  4. 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
  5. MUI

  6. 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
  7. 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.
  8. 2. Lack of Components - Only 11 Components Created. -

    Expected: ~30 - Others implementations has more components - Eventick Check In Dialogs - Eventick Check In Snackbar
  9. 3. Goal of the MDL - What we should expect

    for the future? - Only for small / static apps?
  10. 3. BEM – Block Element Modifier - Easy - Modular

    - Good for extensibility - Easy to create new MDL components
  11. 5. Browser Support - A-grade browsers are fully supported. B-grade

    browsers will gracefully degrade to our CSS-only experience.
  12. 6. Javascript for all - Native Javascript - Uses gulp

    - Uses bower - Front-end People (L)
  13. - 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
  14. - 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