diff --git a/_includes/experimental.html b/_includes/experimental.html
new file mode 100644
index 0000000000..39c498131c
--- /dev/null
+++ b/_includes/experimental.html
@@ -0,0 +1,4 @@
+
+
+ Experimental Features in this section are considered experimental and may change in future version of {{site.project_title}}.
+
diff --git a/css/site2.css b/css/site2.css
index 60b96e4650..0f1eb99aa8 100644
--- a/css/site2.css
+++ b/css/site2.css
@@ -1 +1 @@
-.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"Open Sans",Helvetica,Arial,sans-serif;font-weight:normal;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;font-weight:normal;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:600}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:600}h5{font-size:12px;font-weight:600}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:600}.platform{color:#9f499b}.elements-using{color:#5c6bc0}.elements-creating{color:#d61a7f}.main-bg{background-color:#eee !important}.main-purple{background-color:#1f2036}code,pre{color:#9f499b}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}h2:target:before,h3:target:before,h4:target:before,h5:target:before{display:block;content:" ";margin-top:-70px;height:90px;visibility:hidden}html,body{margin:0;padding:0;height:100%}body{color:#444}body.noscroll{overflow:hidden}img{max-width:100%}pre,code{white-space:pre-wrap;word-wrap:break-word}ul li::before,ol li::before{content:'·';color:#999;margin-left:-15px;position:absolute;font-weight:bold}ul ul,ol ul{margin-left:30px}ol li::before{content:''}ul{list-style:none}table.table{width:100%}table.first-col-nowrap tr td:first-of-type{white-space:nowrap}table td{padding:0;margin:0;vertical-align:top;padding:12px 12px 12px 0}table th{text-transform:uppercase;font-size:14px;text-align:left;padding-right:40px;border-bottom:1px solid #eee;font-weight:600;line-height:48px}b,strong{font-weight:600}hr{border:none;border-bottom:1px solid #eee}dl dt{font-weight:600}dl.horizontal dt{float:left;width:160px}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}summary{outline:none}.error{border:3px solid red;background-color:rgba(255,0,0,0.3);padding:5px}.alert{color:#999;border:1px solid #eee;font-size:14px;padding:10px 15px}.alert b,.alert strong{margin-right:5px}.alert.alert-success b,.alert.alert-success strong{color:green}.alert.alert-info b,.alert.alert-info strong{color:#3367d6}.alert.alert-error b,.alert.alert-error strong{color:#ff4120}p:empty{display:none}a[disabled]{pointer-events:none;color:#ccc}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}paper-button{color:#666;line-height:initial;white-space:nowrap;background:none;font-size:13px}paper-button[raisedButton]{background:#fafafa;box-shadow:rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px}paper-button:hover,paper-button.active{text-decoration:none;background:#fff;box-shadow:0px 4px 10px 0 rgba(0,0,0,0.1),0px 2px 10px 0px rgba(0,0,0,0.1)}paper-button::shadow #content{padding:5px 5px 5px}paper-button::shadow #content>span{vertical-align:middle;margin-left:0}.paper-button[sink]{color:inherit;padding:7px 10px;transition:none}.paper-button[sink]:hover,.paper-button[sink].active{background:-webkit-gradient(linear, to bottom, to top, color-stop(5%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,0.08)));background:-webkit-linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-moz-linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-o-linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);box-shadow:0 1px 1px rgba(0,0,0,0.2) inset,0 -1px 1px rgba(0,0,0,0.1) inset,0 1px 0px rgba(0,0,0,0.2) inset}app-bar .paper-button{font-size:14px;letter-spacing:normal}polymer-ui-icon{display:inline-block;vertical-align:middle;width:24px;height:24px;background-size:48px !important}.bar{padding:16px !important;height:80px}.bar a{text-decoration:none}polymer-ui-toolbar{font:inherit !important;border:none !important;background:inherit !important;height:auto;color:inherit !important}.sticky{position:fixed !important;top:0;width:100%}.onlyonmobile{display:none}paper-button.github::shadow core-icon{width:24px;height:24px;background-size:48px !important}footer{position:relative;background-color:#fafafa;padding:100px 0;padding-left:64px}footer polymer-ui-toolbar{margin-bottom:56px}footer paper-button{margin-right:30px;opacity:0.6;color:black}footer #copyright{color:#b3b3b3;font-size:14px}footer #copyright a{color:#666666}#content-container .article{margin-bottom:2em}#content-container h2{margin-top:20px}#content-container h3{margin-top:15px}#content-container h4{margin-top:10px}#content-container scroll-area article header{margin-bottom:24px}@media only screen and (min-width: 990px){app-drawer[unresolved]{position:fixed;display:block;height:100%;width:265px;background-color:#eee}docs-menu{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}docs-menu[unresolved]{opacity:0;visibility:hidden}scroll-area[sidebar]{display:block;padding-left:265px}scroll-area[sidebar] site-banner{height:286px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:flex-end;-webkit-align-items:flex-end;-moz-align-items:flex-end;-ms-align-items:flex-end;-o-align-items:flex-end;align-items:flex-end}scroll-area[sidebar] site-banner[unresolved]{background-color:#1f2036}scroll-area[sidebar] site-banner[unresolved] app-bar,scroll-area[sidebar] site-banner[unresolved] header{opacity:0;visibility:hidden}scroll-area[sidebar] site-banner header,scroll-area[sidebar] site-banner app-bar{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}scroll-area[sidebar] site-banner[type="platform"]{background-color:#9f499b !important}scroll-area[sidebar] site-banner[type="core"]{background-color:#d61a7f !important}scroll-area[sidebar] site-banner[type="elements"]{background-color:#5c6bc0 !important}scroll-area[sidebar] article{padding:24px 64px;max-width:912px;min-height:300px;overflow:hidden}dropdown-panel{display:none}}@media only screen and (max-width: 850px){scroll-area[unresolved]{visibility:hidden;-webkit-transition:opacity 300ms ease-in, background-color 300ms ease-in;transition:opacity 300ms ease-in, background-color 300ms ease-in}}#sidebar docs-menu{padding:0 16px}#sidebar #logo-container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;height:80px;margin-bottom:24px;padding-left:16px}.edit-on-github{float:right}.edit-on-github+*{clear:both}.permalink{display:none;margin-left:5px;vertical-align:top}.has-permalink:hover .permalink{display:initial}.no-permalink .permalink{display:none !important}.forversion{float:right;color:#ccc;font-style:italic}.article .byline{font-size:smaller;color:#ccc}.author{margin-bottom:20px}.author>p{display:inline-block;margin:0}.author>p:first-of-type{vertical-align:top}.author img{border-radius:7px;margin-right:5px;height:40px;width:40px}#toc summary{font-size:16px;font-weight:600}.video iframe{width:853px;max-width:100%;height:480px}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}#dropdown-toggle{display:none;margin-top:-5px;opacity:0.3}dropdown-panel{position:absolute;top:75px;left:15px;width:240px;z-index:1000}@media only screen and (max-width: 580px){.onlyonmobile{display:block !important}.bar{height:60px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important;padding:56px 0 40px 0 !important}.panel>img{margin-bottom:50px;width:200px;margin-right:auto !important;margin-left:0px !important}.panel.right summary{-webkit-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;order:2}.panel.right img{order:1}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}.panel summary p{margin:10px 0 !important}.paper-button{margin:15px 0}#future polymer-ui-toolbar{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column}#future polymer-ui-toolbar a{margin-right:0 !important}#future polymer-ui-toolbar a:first-of-type{margin-bottom:0}#future polymer-ui-toolbar a:last-of-type{display:none}#architecture .box{margin-bottom:25px}.edit-on-github{display:none}footer{padding:35px}footer polymer-ui-toolbar{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-align:flex-start !important;-webkit-align-items:flex-start !important;-moz-align-items:flex-start !important;-ms-align-items:flex-start !important;-o-align-items:flex-start !important;align-items:flex-start !important}}@media only screen and (max-width: 850px){#dropdown-toggle{display:inline-block}#architecture .panel p{margin-bottom:10px}#architecture .panel .paper-button{margin:0 0 40px}.responsive-table,.responsive-table thead,.responsive-table tbody,.responsive-table th,.responsive-table td,.responsive-table tr{display:block}.responsive-table th{position:absolute;top:-9999px;left:-9999px}.responsive-table td{position:relative;padding-left:40%}.responsive-table td:before{position:absolute;left:0;width:35%;padding-right:10px;text-transform:uppercase;font-size:14px;font-weight:600}.responsive-table tr td:last-child{border-bottom:1px solid #eee}.expressions-table td:nth-of-type(1):before{content:"Feature"}.expressions-table td:nth-of-type(2):before{content:"Example"}.expressions-table td:nth-of-type(3):before{content:"Explanation"}.attributes-table td:nth-of-type(1):before{content:"Attribute"}.attributes-table td:nth-of-type(2):before{content:"Required?"}.attributes-table td:nth-of-type(3):before{content:"Description"}.lifecycle-table td:nth-of-type(1):before{content:"Spec"}.lifecycle-table td:nth-of-type(2):before{content:"Polymer"}.lifecycle-table td:nth-of-type(3):before{content:"Called When"}.fouc-table td:nth-of-type(1):before{content:"Class Name"}.fouc-table td:nth-of-type(2):before{content:"Applied Behavior"}}@media only screen and (min-width: 581px) and (max-width: 850px){.main-bg .panel img{width:300px;margin-right:auto;margin-bottom:30px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important}.panel.left img{margin-left:0px !important;margin-right:auto !important}.panel.right img{width:300px;margin-right:0px !important;margin-left:auto !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}footer{padding-left:35px}}@media only screen and (min-width: 851px) and (max-width: 990px){#future polymer-ui-toolbar{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}#future polymer-ui-toolbar .paper-button:not(:last-child){margin-right:10px;margin-bottom:16px}footer polymer-ui-toolbar{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;-o-justify-content:flex-start;justify-content:flex-start}footer polymer-ui-toolbar .paper-button{margin-bottom:16px}footer #copyright{margin-top:-16px}}@media only screen and (min-width: 990px){#future img{width:416px;height:286px}}
+.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}.meta{font-size:12px;font-weight:normal;line-height:20px}.secondary{font-size:14px;font-weight:normal;line-height:20px}body{font-size:16px;font-family:"Open Sans",Helvetica,Arial,sans-serif;font-weight:normal;line-height:24px}button{font-size:12px;font-weight:normal;text-transform:uppercase}a{font-size:inherit;font-weight:normal;color:#3367d6;text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:"Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace}h1,h2,h3,h4,h5{font-weight:300;letter-spacing:-0.01em;line-height:48px;margin:0}h1{font-size:40px}polyfill-next-selector{content:':host h1'}::content h1{font-size:40px}h2{font-size:24px}polyfill-next-selector{content:':host h2'}::content h2{font-size:24px}h3{font-size:20px}polyfill-next-selector{content:':host h3'}::content h3{font-size:20px}h4{font-size:16px;font-weight:600}polyfill-next-selector{content:':host h4'}::content h4{font-size:16px;font-weight:600}h5{font-size:12px;font-weight:600}polyfill-next-selector{content:':host h5'}::content h5{font-size:12px;font-weight:600}.platform{color:#9f499b}.elements-using{color:#5c6bc0}.elements-creating{color:#d61a7f}.main-bg{background-color:#eee !important}.main-purple{background-color:#1f2036}code,pre{color:#9f499b}pre,.prettyprint{background-color:#fafafa;padding:16px;margin:30px 0}pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline{color:#6b499f}pre .pun,.prettyprint .pun{color:#5c6bc0}pre .str,pre .string,.prettyprint .str,.prettyprint .string{color:#ff4081}pre .pln,.prettyprint .pln{color:#7986cb}pre .kwd,.prettyprint .kwd{color:#d61a7f}pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name{color:#6b499f}pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value{color:#7986cb}pre .com,pre .comment,.prettyprint .com,.prettyprint .comment{color:#8a8a8a}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}h2:target:before,h3:target:before,h4:target:before,h5:target:before{display:block;content:" ";margin-top:-70px;height:90px;visibility:hidden}html,body{margin:0;padding:0;height:100%}body{color:#444}body.noscroll{overflow:hidden}img{max-width:100%}pre,code{white-space:pre-wrap;word-wrap:break-word}ul li::before,ol li::before{content:'·';color:#999;margin-left:-15px;position:absolute;font-weight:bold}ul ul,ol ul{margin-left:30px}ol li::before{content:''}ul{list-style:none}table.table{width:100%}table.first-col-nowrap tr td:first-of-type{white-space:nowrap}table td{padding:0;margin:0;vertical-align:top;padding:12px 12px 12px 0}table th{text-transform:uppercase;font-size:14px;text-align:left;padding-right:40px;border-bottom:1px solid #eee;font-weight:600;line-height:48px}b,strong{font-weight:600}hr{border:none;border-bottom:1px solid #eee}dl dt{font-weight:600}dl.horizontal dt{float:left;width:160px}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}summary{outline:none}.error{border:3px solid red;background-color:rgba(255,0,0,0.3);padding:5px}.alert{color:#999;border:1px solid #eee;font-size:14px;padding:10px 15px}.alert b,.alert strong{margin-right:5px}.alert.alert-success b,.alert.alert-success strong{color:green}.alert.alert-info b,.alert.alert-info strong{color:#3367d6}.alert.alert-error{border-color:#ff4120;fill:#ff4120}.alert.alert-error b,.alert.alert-error strong{color:#ff4120}p:empty{display:none}a[disabled]{pointer-events:none;color:#ccc}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}paper-button{color:#666;line-height:initial;white-space:nowrap;background:none;font-size:13px}paper-button[raisedButton]{background:#fafafa;box-shadow:rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px}paper-button:hover,paper-button.active{text-decoration:none;background:#fff;box-shadow:0px 4px 10px 0 rgba(0,0,0,0.1),0px 2px 10px 0px rgba(0,0,0,0.1)}paper-button::shadow #content{padding:5px 5px 5px}paper-button::shadow #content>span{vertical-align:middle;margin-left:0}.paper-button[sink]{color:inherit;padding:7px 10px;transition:none}.paper-button[sink]:hover,.paper-button[sink].active{background:-webkit-gradient(linear, to bottom, to top, color-stop(5%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,0.08)));background:-webkit-linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-moz-linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:-o-linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);background:linear-gradient(to bottom, rgba(0,0,0,0) 5%,rgba(0,0,0,0.08) 40%);box-shadow:0 1px 1px rgba(0,0,0,0.2) inset,0 -1px 1px rgba(0,0,0,0.1) inset,0 1px 0px rgba(0,0,0,0.2) inset}app-bar a{text-decoration:none !important}app-bar .paper-button{font-size:14px;letter-spacing:normal}polymer-ui-icon{display:inline-block;vertical-align:middle;width:24px;height:24px;background-size:48px !important}.bar{padding:16px !important;height:80px}.bar a{text-decoration:none}polymer-ui-toolbar{font:inherit !important;border:none !important;background:inherit !important;height:auto;color:inherit !important}.sticky{position:fixed !important;top:0;width:100%}.onlyonmobile{display:none}.label{font-weight:600;font-style:italic}.label.label-important{color:darkred}paper-button.github::shadow core-icon{width:24px;height:24px;background-size:48px !important}footer{position:relative;background-color:#fafafa;padding:100px 0;padding-left:64px}footer polymer-ui-toolbar{margin-bottom:56px}footer paper-button{margin-right:30px;opacity:0.6;color:black}footer #copyright{color:#b3b3b3;font-size:14px}footer #copyright a{color:#666666}#content-container .article{margin-bottom:2em}#content-container h2{margin-top:20px}#content-container h3{margin-top:15px}#content-container h4{margin-top:10px}#content-container scroll-area article header{margin-bottom:24px}@media only screen and (min-width: 990px){app-drawer[unresolved]{position:fixed;display:block;height:100%;width:265px;background-color:#eee}docs-menu{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}docs-menu[unresolved]{opacity:0;visibility:hidden}scroll-area[sidebar]{display:block;padding-left:265px}scroll-area[sidebar] site-banner{height:286px;display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:flex-end;-webkit-align-items:flex-end;-moz-align-items:flex-end;-ms-align-items:flex-end;-o-align-items:flex-end;align-items:flex-end}scroll-area[sidebar] site-banner[unresolved]{background-color:#1f2036}scroll-area[sidebar] site-banner[unresolved] app-bar,scroll-area[sidebar] site-banner[unresolved] header{opacity:0;visibility:hidden}scroll-area[sidebar] site-banner header,scroll-area[sidebar] site-banner app-bar{-webkit-transition:opacity 300ms ease-in;transition:opacity 300ms ease-in}scroll-area[sidebar] site-banner[type="platform"]{background-color:#9f499b !important}scroll-area[sidebar] site-banner[type="core"]{background-color:#d61a7f !important}scroll-area[sidebar] site-banner[type="elements"]{background-color:#5c6bc0 !important}scroll-area[sidebar] article{padding:24px 64px;max-width:912px;min-height:300px;overflow:hidden}dropdown-panel{display:none}}@media only screen and (max-width: 850px){scroll-area[unresolved]{visibility:hidden;-webkit-transition:opacity 300ms ease-in, background-color 300ms ease-in;transition:opacity 300ms ease-in, background-color 300ms ease-in}}#sidebar docs-menu{padding:0 16px}#sidebar #logo-container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;height:80px;margin-bottom:24px;padding-left:16px}.edit-on-github{float:right}.edit-on-github+*{clear:both}.permalink{display:none;margin-left:5px;vertical-align:top}.has-permalink:hover .permalink{display:initial}.no-permalink .permalink{display:none !important}.forversion{float:right;color:#ccc;font-style:italic}.article .byline{font-size:smaller;color:#ccc}.author{margin-bottom:20px}.author>p{display:inline-block;margin:0}.author>p:first-of-type{vertical-align:top}.author img{border-radius:7px;margin-right:5px;height:40px;width:40px}#toc summary{font-size:16px;font-weight:600}.video iframe{width:853px;max-width:100%;height:480px}.content-padding,footer>:first-child{max-width:1032px;margin:0 auto}#dropdown-toggle{display:none;margin-top:-5px;opacity:0.3}dropdown-panel{position:absolute;top:75px;left:15px;width:240px;z-index:1000}@media only screen and (max-width: 580px){.onlyonmobile{display:block !important}.bar{height:60px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important;padding:56px 0 40px 0 !important}.panel>img{margin-bottom:50px;width:200px;margin-right:auto !important;margin-left:0px !important}.panel.right summary{-webkit-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;order:2}.panel.right img{order:1}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}.panel summary p{margin:10px 0 !important}.paper-button{margin:15px 0}#future polymer-ui-toolbar{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column}#future polymer-ui-toolbar a{margin-right:0 !important}#future polymer-ui-toolbar a:first-of-type{margin-bottom:0}#future polymer-ui-toolbar a:last-of-type{display:none}#architecture .box{margin-bottom:25px}.edit-on-github{display:none}footer{padding:35px}footer polymer-ui-toolbar{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-align:flex-start !important;-webkit-align-items:flex-start !important;-moz-align-items:flex-start !important;-ms-align-items:flex-start !important;-o-align-items:flex-start !important;align-items:flex-start !important}}@media only screen and (max-width: 850px){#dropdown-toggle{display:inline-block}#architecture .panel p{margin-bottom:10px}#architecture .panel .paper-button{margin:0 0 40px}.responsive-table,.responsive-table thead,.responsive-table tbody,.responsive-table th,.responsive-table td,.responsive-table tr{display:block}.responsive-table th{position:absolute;top:-9999px;left:-9999px}.responsive-table td{position:relative;padding-left:40%}.responsive-table td:before{position:absolute;left:0;width:35%;padding-right:10px;text-transform:uppercase;font-size:14px;font-weight:600}.responsive-table tr td:last-child{border-bottom:1px solid #eee}.expressions-table td:nth-of-type(1):before{content:"Feature"}.expressions-table td:nth-of-type(2):before{content:"Example"}.expressions-table td:nth-of-type(3):before{content:"Explanation"}.attributes-table td:nth-of-type(1):before{content:"Attribute"}.attributes-table td:nth-of-type(2):before{content:"Required?"}.attributes-table td:nth-of-type(3):before{content:"Description"}.lifecycle-table td:nth-of-type(1):before{content:"Spec"}.lifecycle-table td:nth-of-type(2):before{content:"Polymer"}.lifecycle-table td:nth-of-type(3):before{content:"Called When"}.fouc-table td:nth-of-type(1):before{content:"Class Name"}.fouc-table td:nth-of-type(2):before{content:"Applied Behavior"}}@media only screen and (min-width: 581px) and (max-width: 850px){.main-bg .panel img{width:300px;margin-right:auto;margin-bottom:30px}.panel{-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;margin:0 30px !important}.panel.left img{margin-left:0px !important;margin-right:auto !important}.panel.right img{width:300px;margin-right:0px !important;margin-left:auto !important}.panel summary+summary{margin-right:auto !important;margin-left:0px !important}footer{padding-left:35px}}@media only screen and (min-width: 851px) and (max-width: 990px){#future polymer-ui-toolbar{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}#future polymer-ui-toolbar .paper-button:not(:last-child){margin-right:10px;margin-bottom:16px}footer polymer-ui-toolbar{-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;-o-justify-content:flex-start;justify-content:flex-start}footer polymer-ui-toolbar .paper-button{margin-bottom:16px}footer #copyright{margin-top:-16px}}@media only screen and (min-width: 990px){#future img{width:416px;height:286px}}
diff --git a/docs/polymer/binding-types.md b/docs/polymer/binding-types.md
index 424d7c003d..e24ae9aac0 100644
--- a/docs/polymer/binding-types.md
+++ b/docs/polymer/binding-types.md
@@ -350,7 +350,7 @@ If _boolean-expression_ is truthy, _attribute_ appears in the markup; otherwise
### One-time bindings
-Experimental
+{% include experimental.html %}
Sometimes, you may not need dynamic bindings. For these cases, there are one-time bindings.
diff --git a/docs/polymer/layout.md b/docs/polymer/layout.md
index 0fce45ce04..3340ab78e7 100644
--- a/docs/polymer/layout.md
+++ b/docs/polymer/layout.md
@@ -7,6 +7,294 @@ title: Application layout
subtitle: Guide
---
+
+
+{% include experimental.html %}
+
{% include toc.html %}
-TODO
+{{site.project_title}} includes a declarative layout system built on top of [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes). Features in CSS Flexbox are exposed as **declare attributes** you include on elements.
+
+The layout attributes are implemented in [layout.html](/components/polymer/layout.html) using Shadow DOM's [`/deep/` rules](/articles/styling-elements.html#cat). Therefore, they work across all Shadow DOM boundaries. As long as you're loading {{site.project_title}}, feel free to reuse these attributes in your own elements.
+
+## Horizontal and vertical layout
+
+When a container includes the `layout` attribute, it can become a flex container.
+You can specify `horizontal`, `vertical` to change the orientation:
+
+
+
One
+
Two
+
Three
+
+
+
+
One
+
Two
+
Three
+
+
+### Flexible children
+
+Children of an element using the `layout` attribute can use `flex` attributes to control their own sizing. For example:
+
+
+
Alpha
+
Beta (flex)
+
Gamma
+
+
+
+
Alpha
+
Beta (flex)
+
Gamma
+
+
+The same is true for children of `vertical` elements:
+
+
+
Alpha
+
Beta (flex)
+
Gamma
+
+
+
+
Alpha
+
Beta (flex)
+
Gamma
+
+
+Children elements can be told to take up more space by including a "flex ratio" with the `flex` atribute. A flex ratio is specified with a number string: _one_, _two_, _three_, currently up to _twelve_.
+
+For example, to make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use `flex two` and `flex three`, respectively:
+
+
+
Alpha
+
Beta
+
Gamma
+
+
+
+
Alpha
+
Beta
+
Gamma
+
+
+### Cross-axis alignment
+
+By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching in a _horizontal_ layout).
+
+
+
Stretch Fill
+
+
+
+
Stretch Fill
+
+
+Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizontal_ layout)
+by adding `center`.
+
+
+
Center
+
+
+
+
Center
+
+
+You can also position at the top/bottom (or left/right in `vertical` layouts) using `start` or `end`.
+
+
+
start
+
+
+
+
start
+
+
+
+
end
+
+
+
+
end
+
+
+## Justification
+
+Justifying content is done with the `*-justified` attributes.
+
+**Example** - start justified
+
+
+
start-justified
+
+
+
+
start-justified
+
+
+**Example** - center justified
+
+
+
center-justified
+
+
+
+
center-justified
+
+
+**Example** - end justified
+
+
+
end-justified
+
+
+
+
end-justified
+
+
+**Example** - equal space between each element
+
+
+
justified
+
justified
+
justified
+
+
+
+
justified
+
justified
+
justified
+
+
+**Example** - equal space around each element
+
+
+
around-justified
+
around-justified
+
+
+
+
around-justified
+
around-justified
+
+
+## Self alignment
+
+Alignment can also be set per-child (instead of using the layout containers rules):
+
+
+
Alpha
+
Beta
+
Gamma
+
Delta
+
+
+
+
Alpha
+
Beta
+
Gamma
+
Delta
+
+
+## Wrapping
+
+Wrapped layouts can be enabled with the `wrap` attribute.
+
+
+
Alpha
+
Beta
+
Gamma
+
Delta
+
+
+
+
Alpha
+
Beta
+
Gamma
+
Delta
+
+
+Layout direction can be mirrored with the `reverse` attribute.
+
+
+
Alpha
+
Beta
+
Gamma
+
Delta
+
+
+
+
Alpha
+
Beta
+
Gamma
+
Delta
+
+
+## Full bleed <body>
+
+It's common want the entire `` to fit to the viewport. By themselves, {{site.project_title}}'s layout features on `` don't achieve the result. You can make `` take
+up the entire viewport by adding the `fullbleed` attribute:
+
+
+
Fitting a fullbleed body.
+
+
+
+
+This removes its margins and gives maximizes its height to the viewport.
+
+## General purpose attributes
+
+{{site.project_title}} also includes other general purpose attributes for basic positioning:
+
+Attribute | Result
+|-
+`block`| Assigns `display: block`
+`hidden` | Assigns `display: none`
+`relative` | Assigns `position: relative`
+`fit` | Sets `position: absolute` and sets `top:0;right:0;bottom:0;left:0;` (aka "trbl fitting").
**Note:** When using the `fit` attribute, there must be a container with fixed size and has `position: relative` layout. This is so the children know where to fit to.
+
+**Examples**
+
+
Before [A Span] After
+
+
Before A Block Span After
+
Hidden: Not displayed
+
+
Fit
+
+
+
Before [A Span] After
+
Before [A Block Span] After
+
Hidden: Not displayed
+
+
Fit
+
\ No newline at end of file
diff --git a/elements/docs-menu.html b/elements/docs-menu.html
index e5ed599d71..71e5287799 100644
--- a/elements/docs-menu.html
+++ b/elements/docs-menu.html
@@ -43,7 +43,7 @@
Node.bind()
- Application layout
+ App layoutStyling elementsTouch & gesturesRuntime configuration
diff --git a/samples/layout-attr.html b/samples/layout-attr.html
new file mode 100644
index 0000000000..fd4a60230b
--- /dev/null
+++ b/samples/layout-attr.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+