Material Design Lite

Google Developer Group Mumbai, DevFest 2016

Transcript

1. Material Design Lite DevFest 2016
2. Maunash Jani @MaunashJani Genius Lynx - Software Developer DevFest 2016 - Technical Trainer
3. MD Community Implementations Polymer Paper Elements Angular Material Material Design for Bootstrap Material-UI DevFest 2016
4. Material Design Lite By Google http://getmdl.io Why? What? How? DevFest 2016
5. Material Design Lite - 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. DevFest 2016
6. Why MDL? • Material Design • Cross-OS web developer's toolkit • Modern Browsers • Responsive • Content Display websites • Progressive Enhancement DevFest 2016
7. MDL DevFest 2016
8. Get Started https://getmdl.io/started/index.html • Include the master CSS & JavaScript • Use the components • General rules and principles • Use MDL on dynamic websites • What are MDL's responsibilities? • What's next? DevFest 2016
9. Templates • BLOG • ANDROID.COM MDL SKIN • DASHBOARD • PORTFOLIO • TEXT-HEAVY WEBPAGE • STAND-ALONE ARTICLE DevFest 2016
10. Components DevFest 2016
11. Styles Material Design Lite is a light-weight implementation of Material Design, specifically crafted for the web. ➔ Typography ➔ Icons - Material Design Icons ➔ Color palette DevFest 2016
12. Showcase DevFest 2016
13. Tech Renegade App - College Event (@Genius_Lynx) DevFest 2016
14. Chakrakuyh App - College Event (@Diplomads) DevFest 2016
15. Community DevFest 2016 https://github.com/google/material-design-lite Contribute Report Issue Stack Overflow => Material-Design-Lite
16. Q & A DevFest 2016
17. Resources • Material Design - https://material.google.com, https://material.io • Official Website - https://getmdl.io • Github Repository - https://github.com/google/material-design-lite • Materials Design Icons - https://materialdesignicons.com • Stackoverflow - http://stackoverflow.com/questions/tagged/material-design-lite • MDL vs Bootstrap - http://tutorialzine.com/2015/07/comparing-bootstrap-with-mdl • Web Starter Kit - https://developers.google.com/web/tools/starter-kit DevFest 2016
18. THANK YOU! @MaunashJani DevFest 2016