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

Material Design for the Web

Material Design for the Web

Slides for my talk at Chrome Tech Talk Night in Tokyo on 16th July 2015. Event details: http://googledevjp.blogspot.jp/2015/07/chrome-tech-talk-night-8.html

Addy Osmani

July 16, 2015

More Decks by Addy Osmani

Other Decks in Design


  1. Theming with CSS Custom Properties <style> body { --paper-tabs: {

    background-color: red; opacity: 0.5; }; } </style> Custom Property
  2. App-wide Theming #303f9f CSS custom properties --dark-primary-color --light-primary-color --accent-color --primary-text-color

    #303f9f --dark-primary-color --light-primary-color --accent-color --primary-text-color
  3. If your app doesn't work offline, you don't really have

    a mobile web experience. - Rob Dodson
  4. // While there is only one cache in this example,

    the same logic will handle the case where // there are multiple versioned caches. var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { return CURRENT_CACHES[key]; }); event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (expectedCacheNames.indexOf(cacheName) == -1) { // If this cache name isn't present in the array of "expected" cache names, then delete it. console.log('Deleting out of date cache:', cacheName); return caches.delete(cacheName); } }) ); }) ); }); // This sample illustrates an aggressive approach to caching, in which every valid response is
  5. Service Worker caching Take your app offline with ease <script

    src="webcomponents-lite.min.js"></script> <link rel="import" href="platinum-sw-elements.html"> <platinum-sw> <platinum-sw-cache default-cache-strategy="networkFirst" precache='["image.jpg", "results.json", "page.html"]'> </platinum-sw-cache> </platinum-sw>
  6. Google Feeds Download RSS, Atom or Media RSS feeds <google-feeds

    feed=“http://www.engadget.com/rss-full.xml" count=“25"> </google-feeds>
  7. Get and set data using the Firebase APIs <firebase-collection location="https://users1.firebaseio.com/users"

    data="{{users}}"></firebase-collection> <template is="dom-repeat" items="[[users]]" as="user"> <img src="[[user.img]]"><span>[[user.name]]</span> </template>
  8. Push Notifications Stay informed of messages from your app <platinum-push-messaging

    title="You have new stories" message="4 RSS feeds have new stories" icon-url="rss.png" click-url=“feeds/new/“> </platinum-push-messaging>
  9. <!-- Theme --> <link rel="stylesheet" href=“https://storage.googleapis.com/code.getmdl.io/ 1.0.0/material.indigo-pink.min.css"> <!-- Interaction -->

    <script src=“https://storage.googleapis.com/code.getmdl.io/1.0.0/ material.min.js"></script> <!-- Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon? family=Material+Icons"> MATERIAL
 LITE Use our CDN, Bower or npm