![Page 1: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/1.jpg)
![Page 2: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/2.jpg)
Unlock the next era of UIDeveloping with Polymer
![Page 3: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/3.jpg)
+RobDodson @rob_dodson
![Page 4: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/4.jpg)
![Page 5: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/5.jpg)
<h1> !<ul><p>
![Page 6: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/6.jpg)
<animated-pages> !<drawer-panel><icon-button>
![Page 7: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/7.jpg)
![Page 8: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/8.jpg)
http://bit.ly/1jkTo5c
core-elementsImage:
![Page 9: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/9.jpg)
<core-toolbar>
<core-header-panel>
<core-drawer-panel>
<core-menu>
<core-icon>
<core-overlay>
Visual
<core-ajax>
<core-localstorage>
<core-range>
<core-shared-lib>
<core-media-query>
<core-iconset>
Non-visual
And many more…Image: http://bit.ly/1kuX889,
![Page 10: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/10.jpg)
paper-elements
![Page 11: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/11.jpg)
Agenda
Layout Material TransitionsTheming
![Page 12: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/12.jpg)
Layout
![Page 13: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/13.jpg)
![Page 14: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/14.jpg)
<core-toolbar>A basic container for controls like tabs or buttons
![Page 15: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/15.jpg)
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
![Page 16: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/16.jpg)
<core-toolbar> <div>I/O 2014</div> </core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
![Page 17: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/17.jpg)
<core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>I/O 2014</div> </core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
![Page 18: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/18.jpg)
<core-toolbar class=“tall”> <core-icon-button icon=“menu”> </core-icon-button> <div class>I/O 2014</div> </core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
![Page 19: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/19.jpg)
A simple container with a header section and a content section
<core-header-panel>
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
![Page 20: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/20.jpg)
A simple container with a header section and a content section
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
<core-header-panel>
![Page 21: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/21.jpg)
A simple container with a header section and a content section
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
<core-header-panel>
![Page 22: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/22.jpg)
A simple container with a header section and a content section
<core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
<core-header-panel>
![Page 23: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/23.jpg)
<core-header-panel mode=“scroll”> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
Toolbar will scroll with the page
<core-header-panel>
![Page 24: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/24.jpg)
<core-header-panel mode=“waterfall-tall”> <core-toolbar class=“tall animate”> <core-icon-button icon=“menu"> </core-icon-button> I/O 2014 </core-toolbar> <div class=“content”>…</div> </core-header-panel>
Toolbar will shrink on scroll
<core-header-panel>
![Page 25: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/25.jpg)
A <core-scroll-header-panel> provides an additional condenses attribute to create a cross-fade effect
<core-scroll-header-panel condenses> <core-toolbar class=“tall" animate> <core-icon-button icon=“arrow-back"> </core-icon-button> <div class="bottom indent title”> Title </div> ... </core-toolbar> </core-scroll-header-panel>
Image: http://bit.ly/1b3E67J
![Page 26: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/26.jpg)
Responsive layout
![Page 27: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/27.jpg)
A responsive container that combines a left- or right-side drawer panel and a main content area.
<core-drawer-panel>
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
![Page 28: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/28.jpg)
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
A responsive container that combines a left- or right-side drawer panel and a main content area.
<core-drawer-panel>
![Page 29: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/29.jpg)
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
A responsive container that combines a left- or right-side drawer panel and a main content area.
<core-drawer-panel>
![Page 30: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/30.jpg)
![Page 31: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/31.jpg)
Layout attributes
![Page 32: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/32.jpg)
Layout attributes add declarative support for CSS flexbox
![Page 33: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/33.jpg)
<div layout horizontal> <div>One</div> <div>Two</div> <div>Three</div> </div>
Horizontal Layout
One Two Three
![Page 34: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/34.jpg)
<div layout horizontal> <div>One</div> <div flex>Two (flex)</div> <div>Three</div> </div>
Horizontal Layout
One Two (flex) Three
Flex to fill available space
![Page 35: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/35.jpg)
<div layout vertical> <div>One</div> <div flex>Two</div> <div>Three</div> </div>
Vertical Layout One
Two (flex)
Three
![Page 36: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/36.jpg)
<div layout horizontal> <div flex three>Alpha</div> <div>Beta</div> <div flex two>Gamma</div> </div>
Flex Ratios
Alpha Beta Gamma
![Page 37: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/37.jpg)
<div layout horizontal center-justified> <div>Centered</div> </div>
Axis Centering Centered
Main Axis
![Page 38: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/38.jpg)
<div layout horizontal center> <div>Centered</div> </div>
Axis Centering
Centered
Cross Axis
![Page 39: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/39.jpg)
<div layout horizontal center center-justified> <div>OMG, Centered!</div> </div>
The Holy Grail
OMG, Centered!
![Page 40: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/40.jpg)
Material controls
![Page 41: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/41.jpg)
<paper-checkbox></paper-checkbox>
![Page 42: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/42.jpg)
<paper-toggle-button></paper-toggle-button>
![Page 43: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/43.jpg)
<paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
![Page 44: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/44.jpg)
<paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs>
Less markup. Less CSS. Less clutter.
![Page 45: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/45.jpg)
Material effects
![Page 46: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/46.jpg)
<div class=“card”> <img src=“science.svg”> <paper-ripple fit></paper-ripple> </div>
A reactive ink effect for indicating touch and mouse actions
<paper-ripple>
![Page 47: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/47.jpg)
<div class=“card”> <paper-shadow z=“5” animated> </paper-shadow> </div>
A dynamic shadow for conveying z-depth and spatial relationships
<paper-shadow>
![Page 48: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/48.jpg)
polymer-project.org
![Page 49: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/49.jpg)
Theming
![Page 50: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/50.jpg)
<paper-slider min=“0” max=“100”> </paper-slider>
allows you to style nodes internal to an element’s shadow dom
::shadow
![Page 51: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/51.jpg)
paper-slider::shadow #sliderKnobInner { background-color: #f4b400; }
<paper-slider min=“0” max=“100”> </paper-slider>
allows you to style nodes internal to an element’s shadow dom
::shadow
![Page 52: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/52.jpg)
.red-theme /deep/ #ink { background-color: #E91E63; }
styles will pierce all shadow boundaries
/deep/
![Page 53: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/53.jpg)
With ::shadow and /deep/ you can apply site wide themes
source: ebidel.github.io/material-playground
![Page 54: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/54.jpg)
You’re breaking the style encapsulation!Angry Developer
![Page 55: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/55.jpg)
<core-style>
![Page 56: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/56.jpg)
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
EXPERIMENTAL
![Page 57: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/57.jpg)
<polymer-element name="x-foo" noscript> <template> <core-style ref=“tomato-theme“> </core-style> <content></content> </template> </polymer-element>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
EXPERIMENTAL
![Page 58: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/58.jpg)
<polymer-element name="x-foo" noscript> <template> <core-style ref=“tomato-theme“> </core-style> <content></content> </template> </polymer-element>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
EXPERIMENTAL
Style producer
Style consumer
![Page 59: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/59.jpg)
<polymer-element name="x-foo" noscript> <template> <core-style ref=“tomato-theme“> </core-style> <content></content> </template> </polymer-element>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
Hello from <x-foo>
EXPERIMENTAL
![Page 60: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/60.jpg)
EXPERIMENTAL
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
Style binding
![Page 61: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/61.jpg)
EXPERIMENTAL
<script> CoreStyle.g.myColor = 'steelblue'; </script>
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
![Page 62: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/62.jpg)
<script> CoreStyle.g.myColor = 'steelblue'; </script>
Hello from <x-foo>
EXPERIMENTAL
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
![Page 63: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/63.jpg)
Transitions
![Page 64: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/64.jpg)
A pluggable system for creating smooth transitions from one view to the next.
<core-animated-pages>
<core-animated-pages selected=“0” transitions="slide-from-right"> <section>…</section> <section>…</section> <section>…</section> </core-animated-pages>
![Page 65: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/65.jpg)
![Page 66: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/66.jpg)
Designer
![Page 67: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/67.jpg)
github.com/Polymer/designer+
polymer-project.org
![Page 68: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/68.jpg)
![Page 69: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/69.jpg)
What did we learn
![Page 70: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/70.jpg)
Layout
Material
Theming
Transitions
![Page 71: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/71.jpg)
Scaffold your application with core-* elements
Material
Theming
Transitions
![Page 72: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/72.jpg)
Layout
Create beautiful UIs using paper-* elements
Theming
Transitions
![Page 73: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/73.jpg)
Layout
Material
Theme your app with ::shadow, /deep/ and core-style
Transitions
![Page 74: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/74.jpg)
Layout
Material
Theming
Move between states with core-animated-pages
![Page 75: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/75.jpg)
polymer-project.org
![Page 76: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/76.jpg)
<what-next>Get started at polymer-project.org
Session Feedback http://goo.gl/sUiJbx
youtube.com/GoogleDevelopers
![Page 77: Unlock the next era of UI design with Polymer](https://reader033.vdocuments.net/reader033/viewer/2022060108/554f4544b4c905cd048b5718/html5/thumbnails/77.jpg)
+RobDodson @rob_dodson
Thank you!