unlock the next era of ui design with polymer
DESCRIPTION
Entering the multi-screen era means rethinking how we build our applications. Producing a few PSDs doesn't cut it anymore, we have to start seeing the things we design as components within larger systems. Join us to learn how to use Polymer to revolutionize your design process. With these new tools we can create the UIs of the future, and shorten the time between concept and reality.TRANSCRIPT
Unlock the next era of UIDeveloping with Polymer
+RobDodson @rob_dodson
<h1> !<ul><p>
<animated-pages> !<drawer-panel><icon-button>
http://bit.ly/1jkTo5c
core-elementsImage:
<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,
paper-elements
Agenda
Layout Material TransitionsTheming
Layout
<core-toolbar>A basic container for controls like tabs or buttons
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controls like tabs or buttons
<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
<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
<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
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>
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>
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>
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>
<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>
<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>
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
Responsive layout
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>
<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>
<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>
Layout attributes
Layout attributes add declarative support for CSS flexbox
<div layout horizontal> <div>One</div> <div>Two</div> <div>Three</div> </div>
Horizontal Layout
One Two Three
<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
<div layout vertical> <div>One</div> <div flex>Two</div> <div>Three</div> </div>
Vertical Layout One
Two (flex)
Three
<div layout horizontal> <div flex three>Alpha</div> <div>Beta</div> <div flex two>Gamma</div> </div>
Flex Ratios
Alpha Beta Gamma
<div layout horizontal center-justified> <div>Centered</div> </div>
Axis Centering Centered
Main Axis
<div layout horizontal center> <div>Centered</div> </div>
Axis Centering
Centered
Cross Axis
<div layout horizontal center center-justified> <div>OMG, Centered!</div> </div>
The Holy Grail
OMG, Centered!
Material controls
<paper-checkbox></paper-checkbox>
<paper-toggle-button></paper-toggle-button>
<paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
<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.
Material effects
<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>
<div class=“card”> <paper-shadow z=“5” animated> </paper-shadow> </div>
A dynamic shadow for conveying z-depth and spatial relationships
<paper-shadow>
polymer-project.org
Theming
<paper-slider min=“0” max=“100”> </paper-slider>
allows you to style nodes internal to an element’s shadow dom
::shadow
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
.red-theme /deep/ #ink { background-color: #E91E63; }
styles will pierce all shadow boundaries
/deep/
With ::shadow and /deep/ you can apply site wide themes
source: ebidel.github.io/material-playground
You’re breaking the style encapsulation!Angry Developer
<core-style>
<core-style id=“tomato-theme“> :host { display: block; color: white; background-color: tomato; } </core-style>
EXPERIMENTAL
<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
<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
<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
EXPERIMENTAL
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
Style binding
EXPERIMENTAL
<script> CoreStyle.g.myColor = 'steelblue'; </script>
<core-style id=“blue-theme“> :host { display: block; color: white; background-color: {{myColor}}; } </core-style>
<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>
Transitions
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>
Designer
github.com/Polymer/designer+
polymer-project.org
What did we learn
Layout
Material
Theming
Transitions
Scaffold your application with core-* elements
Material
Theming
Transitions
Layout
Create beautiful UIs using paper-* elements
Theming
Transitions
Layout
Material
Theme your app with ::shadow, /deep/ and core-style
Transitions
Layout
Material
Theming
Move between states with core-animated-pages
polymer-project.org
<what-next>Get started at polymer-project.org
Session Feedback http://goo.gl/sUiJbx
youtube.com/GoogleDevelopers
+RobDodson @rob_dodson
Thank you!