Material Design Lite

We will talk about:
- Material Design
- What and How of MDL
- Web Starter Kit
- Polymer Starter Kit

Transcript

1. Material Design Lite Andres Osorio @codeandrop
2. Agenda • Material Design • What and How • Web Starter Kit • Polymer Starter Kit • Demo time!
3. Material Design • Interact immersively with your brand • Any device • Surfaces & shadows • Meaningful & delightful motion • Print–like aesthetic • Adaptive design 200K Material Apps 40% + since Lollipop
4. MDL - What • Group of components • Lets you add a Material Design look and feel to your websites. • No dependency on JS frameworks • Cross-device use • Gracefully degrade in older browsers • Goal is 60fps (16.66~ms)
5. Styles Components Templates
6. Styles - Fonts <link rel="stylesheet" href="http://fonts.googleapis.com/css? family=Roboto:300,400,500,700" type="text/css">
7. Styles - Icons
8. Styles - Icons $ bower install material-design-icons --save • Icons: Font Web, Images Web, Android, iOS • Web: ◦ Google Web Fonts <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ◦ @font-face
9. Styles - Icons • Ligatures: rendering of an icon glyph simply by using its textual name • Evergreen browsers • Sizing • Color
10. Styles - Icons
11. Styles - Color Palette
12. Components
13. Components
15. Templates - Blog
16. Templates - Dashboard
17. Web Starter Kit
18. Polymer Starter Kit
19. So... • MDL for static sites • WSK gets you up and running • Polymer for web components • PSK gets you up and running
20. Demo Time!
21. Links • http://getmdl.io • https://developers.google.com/web/tools/starter-kit/ • https://developers.google.com/web/tools/polymer- starter-kit/
22. Andres Osorio @codeandrop