The document outlines the capabilities and components available in the Polymer library for UI development, including core and paper elements that facilitate responsive layouts, material design themes, and transitions. It provides examples of various UI components like toolbars, header panels, and interactive controls that can be used to create modern web applications. Additionally, it emphasizes the importance of theming and the ability to define styles and layouts declaratively.

2. Unlock the next era of UI
Developing with Polymer

3. +RobDodson
@rob_dodson

5. <h1>
!<ul>
<p>

6. <animated-pages>
!<drawer-panel>
<icon-button>

8. http://bit.ly/1jkTo5c
core-elements
Image:

9. <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,

10. paper-elements

11. Agenda
Layout Material TransitionsTheming

12. Layout

14. <core-toolbar>
A basic container for controls
like tabs or buttons

15. <link rel=“import”
href=“core-toolbar.html”>
<core-toolbar>
A basic container for controls
like tabs or buttons

16. <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

17. <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

18. <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

19. 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>

20. 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>

21. 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>

22. 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>

23. <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>

24. <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>

25. 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

26. Responsive layout

27. 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>

28. <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>

29. <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>

31. Layout attributes

32. Layout attributesadd
declarative support for CSS flexbox

33. <div layout horizontal>
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Horizontal Layout
One Two Three

34. <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

35. <div layout vertical>
<div>One</div>
<div flex>Two</div>
<div>Three</div>
</div>
Vertical Layout One
Two (flex)
Three

36. <div layout horizontal>
<div flex three>Alpha</div>
<div>Beta</div>
<div flex two>Gamma</div>
</div>
Flex Ratios
Alpha Beta Gamma

37. <div layout horizontal
center-justified>
<div>Centered</div>
</div>
Axis Centering Centered
Main Axis

38. <div layout horizontal
center>
<div>Centered</div>
</div>
Axis Centering
Centered
Cross Axis

39. <div layout horizontal
center center-justified>
<div>OMG, Centered!</div>
</div>
The Holy Grail
OMG, Centered!

40. Material controls

41. <paper-checkbox></paper-checkbox>

42. <paper-toggle-button></paper-toggle-button>

43. <paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>

44. <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.

45. Material effects

46. <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>

47. <div class=“card”>
<paper-shadow z=“5” animated>
</paper-shadow>
</div>
A dynamic shadow for conveying
z-depth and spatial relationships
<paper-shadow>

48. polymer-project.org

49. Theming

50. <paper-slider min=“0” max=“100”>
</paper-slider>
allows you to style nodes
internal to an element’s
shadow dom
::shadow

51. 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

52. .red-theme /deep/ #ink {
background-color: #E91E63;
}
styles will pierce all
shadow boundaries
/deep/

53. With ::shadow and /deep/ you
can apply site wide themes
source: ebidel.github.io/material-playground

54. You’re breaking the
style encapsulation!
Angry Developer

55. <core-style>

56. <core-style id=“tomato-theme“>
:host {
display: block;
color: white;
background-color: tomato;
}
</core-style>
EXPERIMENTAL

57. <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

58. <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

59. <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

60. EXPERIMENTAL
<core-style id=“blue-theme“>
:host {
display: block;
color: white;
background-color: {{myColor}};
}
</core-style>
Style binding

61. EXPERIMENTAL
<script>
CoreStyle.g.myColor = 'steelblue';
</script>
<core-style id=“blue-theme“>
:host {
display: block;
color: white;
background-color: {{myColor}};
}
</core-style>

62. <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>

63. Transitions

64. 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>

66. Designer

67. github.com/Polymer/designer
+
polymer-project.org

69. What did we learn

70. Layout
Material
Theming
Transitions

71. Scaffold your application with core-* elements
Material
Theming
Transitions

72. Layout
Create beautiful UIs using paper-* elements
Theming
Transitions

73. Layout
Material
Theme your app with ::shadow, /deep/ and core-style
Transitions

74. Layout
Material
Theming
Move between states with core-animated-pages

75. polymer-project.org

76. <what-next>
Get started at polymer-project.org
Session Feedback
http://goo.gl/sUiJbx
youtube.com/GoogleDevelopers

77. +RobDodson
@rob_dodson
Thank you!