From d128b833289b7a4715c84d183bf4519326d9727e Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Mon, 22 Aug 2016 15:06:06 -0700
Subject: [PATCH 01/19] port iron-flex-layout to 2.0

---
 CONTRIBUTING.md                      |  77 -------
 README.md                            |  55 -----
 bower.json                           |  11 +-
 classes/iron-flex-layout.html        | 317 ---------------------------
 classes/iron-shadow-flex-layout.html | 313 --------------------------
 demo/index.html                      |  92 ++++----
 index.html                           |  24 --
 iron-flex-layout-classes.html        |  11 -
 iron-flex-layout.html                |  28 +--
 test/iron-flex-layout.html           |  50 ++---
 10 files changed, 83 insertions(+), 895 deletions(-)
 delete mode 100644 CONTRIBUTING.md
 delete mode 100644 README.md
 delete mode 100644 classes/iron-flex-layout.html
 delete mode 100644 classes/iron-shadow-flex-layout.html
 delete mode 100644 index.html

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
deleted file mode 100644
index 093090d..0000000
--- a/CONTRIBUTING.md
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--
-This file is autogenerated based on
-https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
-
-If you edit that file, it will get updated everywhere else.
-If you edit this file, your changes will get overridden :)
-
-You can however override the jsbin link with one that's customized to this
-specific element:
-
-jsbin=https://jsbin.com/cagaye/edit?html,output
--->
-
-# Polymer Elements
-## Guide for Contributors
-
-Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
-
-### Filing Issues
-
-**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
-
- 1. **Who will use the feature?** _“As someone filling out a form…”_
- 2. **When will they use the feature?** _“When I enter an invalid value…”_
- 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
-
-**If you are filing an issue to report a bug**, please provide:
-
- 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
-
- ```markdown
- The `paper-foo` element causes the page to turn pink when clicked.
-
- ## Expected outcome
-
- The page stays the same color.
-
- ## Actual outcome
-
- The page turns pink.
-
- ## Steps to reproduce
-
- 1. Put a `paper-foo` element in the page.
- 2. Open the page in a web browser.
- 3. Click the `paper-foo` element.
- ```
-
- 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
-
- 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
-
-### Submitting Pull Requests
-
-**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
-
-When submitting pull requests, please provide:
-
- 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
-
- ```markdown
- (For a single issue)
- Fixes #20
-
- (For multiple issues)
- Fixes #32, fixes #40
- ```
-
- 2. **A succinct description of the design** used to fix any related issues. For example:
-
- ```markdown
- This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
- ```
-
- 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
-
-If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
diff --git a/README.md b/README.md
deleted file mode 100644
index 219fca7..0000000
--- a/README.md
+++ /dev/null
@@ -1,55 +0,0 @@
-
-<!---
-
-This README is automatically generated from the comments in these files:
-iron-flex-layout.html
-
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
-
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
-
--->
-
-[![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
-
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-flex-layout)_
-
-
-##&lt;iron-flex-layout&gt;
-
-The `<iron-flex-layout>` component provides simple ways to use
-[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
-also known as flexbox. This component provides two different ways to use flexbox:
-
-1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
-The layout class stylesheet provides a simple set of class-based flexbox rules, that
-let you specify layout properties directly in markup. You must include this file
-in every element that needs to use them.
-
-Sample use:
-
-   <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
-
-   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-
-   <div class="layout horizontal layout-start">
-     <div>cross axis start alignment</div>
-   </div>
-
-1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
-The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
-
-
-
-Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
-are deprecated, and should not be used. To continue using layout properties
-directly in markup, please switch to using the new `dom-module`-based
-[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
-Please note that the new version does not use `/deep/`, and therefore requires you
-to import the `dom-modules` in every element that needs to use them.
-
-A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
-
-
diff --git a/bower.json b/bower.json
index e175297..352224c 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-flex-layout",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "Provide flexbox-based layouts",
   "keywords": [
     "web-components",
@@ -18,14 +18,13 @@
     "url": "git://github.com/PolymerElements/iron-flex-layout.git"
   },
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0"
+    "polymer": "https://github.com/PolymerLabs/alacarte.git#master"
   },
   "devDependencies": {
-    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "web-component-tester": "^4.0.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#v1-polymer-edits",
+    "web-component-tester": "^4.0.0",
+    "iron-demo-helpers": "notwaldorf/iron-demo-helpers#2.0-preview"
   },
   "ignore": []
 }
diff --git a/classes/iron-flex-layout.html b/classes/iron-flex-layout.html
deleted file mode 100644
index 5fa7ce6..0000000
--- a/classes/iron-flex-layout.html
+++ /dev/null
@@ -1,317 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<link rel="import" href="iron-shadow-flex-layout.html">
-
-<script>
-  console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
-</script>
-
-<style>
-
-  /*******************************
-            Flex Layout
-  *******************************/
-
-  .layout.horizontal,
-  .layout.horizontal-reverse,
-  .layout.vertical,
-  .layout.vertical-reverse {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-  }
-
-  .layout.inline {
-    display: -ms-inline-flexbox;
-    display: -webkit-inline-flex;
-    display: inline-flex;
-  }
-
-  .layout.horizontal {
-    -ms-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-  }
-
-  .layout.horizontal-reverse {
-    -ms-flex-direction: row-reverse;
-    -webkit-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-  }
-
-  .layout.vertical {
-    -ms-flex-direction: column;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-  }
-
-  .layout.vertical-reverse {
-    -ms-flex-direction: column-reverse;
-    -webkit-flex-direction: column-reverse;
-    flex-direction: column-reverse;
-  }
-
-  .layout.wrap {
-    -ms-flex-wrap: wrap;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-  }
-  
-  .layout.no-wrap {
-    -ms-flex-wrap: nowrap;
-    -webkit-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-  }
-
-  .layout.wrap-reverse {
-    -ms-flex-wrap: wrap-reverse;
-    -webkit-flex-wrap: wrap-reverse;
-    flex-wrap: wrap-reverse;
-  }
-
-  .flex-auto {
-    -ms-flex: 1 1 auto;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
-  }
-
-  .flex-none {
-    -ms-flex: none;
-    -webkit-flex: none;
-    flex: none;
-  }
-
-  .flex,
-  .flex-1 {
-    -ms-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-  }
-
-  .flex-2 {
-    -ms-flex: 2;
-    -webkit-flex: 2;
-    flex: 2;
-  }
-
-  .flex-3 {
-    -ms-flex: 3;
-    -webkit-flex: 3;
-    flex: 3;
-  }
-
-  .flex-4 {
-    -ms-flex: 4;
-    -webkit-flex: 4;
-    flex: 4;
-  }
-
-  .flex-5 {
-    -ms-flex: 5;
-    -webkit-flex: 5;
-    flex: 5;
-  }
-
-  .flex-6 {
-    -ms-flex: 6;
-    -webkit-flex: 6;
-    flex: 6;
-  }
-
-  .flex-7 {
-    -ms-flex: 7;
-    -webkit-flex: 7;
-    flex: 7;
-  }
-
-  .flex-8 {
-    -ms-flex: 8;
-    -webkit-flex: 8;
-    flex: 8;
-  }
-
-  .flex-9 {
-    -ms-flex: 9;
-    -webkit-flex: 9;
-    flex: 9;
-  }
-
-  .flex-10 {
-    -ms-flex: 10;
-    -webkit-flex: 10;
-    flex: 10;
-  }
-
-  .flex-11 {
-    -ms-flex: 11;
-    -webkit-flex: 11;
-    flex: 11;
-  }
-
-  .flex-12 {
-    -ms-flex: 12;
-    -webkit-flex: 12;
-    flex: 12;
-  }
-
-  /* alignment in cross axis */
-
-  .layout.start {
-    -ms-flex-align: start;
-    -webkit-align-items: flex-start;
-    align-items: flex-start;
-  }
-
-  .layout.center,
-  .layout.center-center {
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-  }
-
-  .layout.end {
-    -ms-flex-align: end;
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-  }
-
-  /* alignment in main axis */
-
-  .layout.start-justified {
-    -ms-flex-pack: start;
-    -webkit-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-
-  .layout.center-justified,
-  .layout.center-center {
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-  }
-
-  .layout.end-justified {
-    -ms-flex-pack: end;
-    -webkit-justify-content: flex-end;
-    justify-content: flex-end;
-  }
-
-  .layout.around-justified {
-    -ms-flex-pack: around;
-    -webkit-justify-content: space-around;
-    justify-content: space-around;
-  }
-
-  .layout.justified {
-    -ms-flex-pack: justify;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
-  }
-
-  /* self alignment */
-
-  .self-start {
-    -ms-align-self: flex-start;
-    -webkit-align-self: flex-start;
-    align-self: flex-start;
-  }
-
-  .self-center {
-    -ms-align-self: center;
-    -webkit-align-self: center;
-    align-self: center;
-  }
-
-  .self-end {
-    -ms-align-self: flex-end;
-    -webkit-align-self: flex-end;
-    align-self: flex-end;
-  }
-
-  .self-stretch {
-    -ms-align-self: stretch;
-    -webkit-align-self: stretch;
-    align-self: stretch;
-  }
-
-  /*******************************
-            Other Layout
-  *******************************/
-
-  .block {
-    display: block;
-  }
-
-  /* IE 10 support for HTML5 hidden attr */
-  [hidden] {
-    display: none !important;
-  }
-
-  .invisible {
-    visibility: hidden !important;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .fit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  body.fullbleed {
-    margin: 0;
-    height: 100vh;
-  }
-
-  .scroll {
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-  }
-
-  /* fixed position */
-
-  .fixed-bottom,
-  .fixed-left,
-  .fixed-right,
-  .fixed-top {
-    position: fixed;
-  }
-
-  .fixed-top {
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .fixed-right {
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .fixed-bottom {
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .fixed-left {
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-</style>
diff --git a/classes/iron-shadow-flex-layout.html b/classes/iron-shadow-flex-layout.html
deleted file mode 100644
index 5dcde19..0000000
--- a/classes/iron-shadow-flex-layout.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<script>
-  console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
-</script>
-
-<style>
-
-  /*******************************
-            Flex Layout
-  *******************************/
-
-  html /deep/ .layout.horizontal,
-  html /deep/ .layout.horizontal-reverse,
-  html /deep/ .layout.vertical,
-  html /deep/ .layout.vertical-reverse {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-  }
-
-  html /deep/ .layout.inline {
-    display: -ms-inline-flexbox;
-    display: -webkit-inline-flex;
-    display: inline-flex;
-  }
-
-  html /deep/ .layout.horizontal {
-    -ms-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-  }
-
-  html /deep/ .layout.horizontal-reverse {
-    -ms-flex-direction: row-reverse;
-    -webkit-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-  }
-
-  html /deep/ .layout.vertical {
-    -ms-flex-direction: column;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-  }
-
-  html /deep/ .layout.vertical-reverse {
-    -ms-flex-direction: column-reverse;
-    -webkit-flex-direction: column-reverse;
-    flex-direction: column-reverse;
-  }
-
-  html /deep/ .layout.wrap {
-    -ms-flex-wrap: wrap;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-  }
-  
-  html /deep/ .layout-no-wrap {
-    -ms-flex-wrap: nowrap;
-    -webkit-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-  }
-
-  html /deep/ .layout.wrap-reverse {
-    -ms-flex-wrap: wrap-reverse;
-    -webkit-flex-wrap: wrap-reverse;
-    flex-wrap: wrap-reverse;
-  }
-
-  html /deep/ .flex-auto {
-    -ms-flex: 1 1 auto;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
-  }
-
-  html /deep/ .flex-none {
-    -ms-flex: none;
-    -webkit-flex: none;
-    flex: none;
-  }
-
-  html /deep/ .flex,
-  html /deep/ .flex-1 {
-    -ms-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-  }
-
-  html /deep/ .flex-2 {
-    -ms-flex: 2;
-    -webkit-flex: 2;
-    flex: 2;
-  }
-
-  html /deep/ .flex-3 {
-    -ms-flex: 3;
-    -webkit-flex: 3;
-    flex: 3;
-  }
-
-  html /deep/ .flex-4 {
-    -ms-flex: 4;
-    -webkit-flex: 4;
-    flex: 4;
-  }
-
-  html /deep/ .flex-5 {
-    -ms-flex: 5;
-    -webkit-flex: 5;
-    flex: 5;
-  }
-
-  html /deep/ .flex-6 {
-    -ms-flex: 6;
-    -webkit-flex: 6;
-    flex: 6;
-  }
-
-  html /deep/ .flex-7 {
-    -ms-flex: 7;
-    -webkit-flex: 7;
-    flex: 7;
-  }
-
-  html /deep/ .flex-8 {
-    -ms-flex: 8;
-    -webkit-flex: 8;
-    flex: 8;
-  }
-
-  html /deep/ .flex-9 {
-    -ms-flex: 9;
-    -webkit-flex: 9;
-    flex: 9;
-  }
-
-  html /deep/ .flex-10 {
-    -ms-flex: 10;
-    -webkit-flex: 10;
-    flex: 10;
-  }
-
-  html /deep/ .flex-11 {
-    -ms-flex: 11;
-    -webkit-flex: 11;
-    flex: 11;
-  }
-
-  html /deep/ .flex-12 {
-    -ms-flex: 12;
-    -webkit-flex: 12;
-    flex: 12;
-  }
-
-  /* alignment in cross axis */
-
-  html /deep/ .layout.start {
-    -ms-flex-align: start;
-    -webkit-align-items: flex-start;
-    align-items: flex-start;
-  }
-
-  html /deep/ .layout.center,
-  html /deep/ .layout.center-center {
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-  }
-
-  html /deep/ .layout.end {
-    -ms-flex-align: end;
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-  }
-
-  /* alignment in main axis */
-
-  html /deep/ .layout.start-justified {
-    -ms-flex-pack: start;
-    -webkit-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-
-  html /deep/ .layout.center-justified,
-  html /deep/ .layout.center-center {
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-  }
-
-  html /deep/ .layout.end-justified {
-    -ms-flex-pack: end;
-    -webkit-justify-content: flex-end;
-    justify-content: flex-end;
-  }
-
-  html /deep/ .layout.around-justified {
-    -ms-flex-pack: around;
-    -webkit-justify-content: space-around;
-    justify-content: space-around;
-  }
-
-  html /deep/ .layout.justified {
-    -ms-flex-pack: justify;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
-  }
-
-  /* self alignment */
-
-  html /deep/ .self-start {
-    -ms-align-self: flex-start;
-    -webkit-align-self: flex-start;
-    align-self: flex-start;
-  }
-
-  html /deep/ .self-center {
-    -ms-align-self: center;
-    -webkit-align-self: center;
-    align-self: center;
-  }
-
-  html /deep/ .self-end {
-    -ms-align-self: flex-end;
-    -webkit-align-self: flex-end;
-    align-self: flex-end;
-  }
-
-  html /deep/ .self-stretch {
-    -ms-align-self: stretch;
-    -webkit-align-self: stretch;
-    align-self: stretch;
-  }
-
-  /*******************************
-            Other Layout
-  *******************************/
-
-  html /deep/ .block {
-    display: block;
-  }
-
-  /* IE 10 support for HTML5 hidden attr */
-  html /deep/ [hidden] {
-    display: none !important;
-  }
-
-  html /deep/ .invisible {
-    visibility: hidden !important;
-  }
-
-  html /deep/ .relative {
-    position: relative;
-  }
-
-  html /deep/ .fit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  body.fullbleed {
-    margin: 0;
-    height: 100vh;
-  }
-
-  html /deep/ .scroll {
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-  }
-
-  .fixed-bottom,
-  .fixed-left,
-  .fixed-right,
-  .fixed-top {
-    position: fixed;
-  }
-
-  html /deep/ .fixed-top {
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  html /deep/ .fixed-right {
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  html /deep/ .fixed-bottom {
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  html /deep/ .fixed-left {
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-</style>
diff --git a/demo/index.html b/demo/index.html
index 4bc2d41..60d9df7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,17 +18,16 @@
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-  <link rel="import" href="../../paper-styles/demo-pages.html">
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../iron-flex-layout.html">
 
-  <style is="custom-style" include="demo-pages-shared-styles">
+  <style is="custom-style">
     demo-snippet {
       --demo-snippet-demo: {
         padding: 0;
       }
     }
+
     .container {
       background-color: #ccc;
       padding: 5px;
@@ -41,20 +40,21 @@
       min-height: 20px;
     }
 
-    .vertical-section-container {
-      max-width: 700px
+    .main-container {
+      max-width: 600px;
+      margin: 0 auto;
     }
   </style>
 
 </head>
 <body unresolved class="fullbleed">
-  <div class="vertical-section-container centered">
+  <div class="main-container">
     <h4>Horizontal and vertical layout</h4>
     <demo-snippet>
       <template>
         <style is="custom-style">
           .flex {
-            @apply(--layout-horizontal);
+            @apply --layout-horizontal;
           }
         </style>
         <div class="container flex">
@@ -70,10 +70,10 @@ <h4>Flexible children</h4>
       <template>
         <style is="custom-style">
           .flex-horizontal {
-            @apply(--layout-horizontal);
+            @apply --layout-horizontal;
           }
           .flexchild {
-            @apply(--layout-flex);
+            @apply --layout-flex;
           }
         </style>
 
@@ -90,11 +90,11 @@ <h4>Flexible children in vertical layouts</h4>
       <template>
         <style is="custom-style">
           .flex-vertical {
-            @apply(--layout-vertical);
+            @apply --layout-vertical;
             height: 220px;
           }
           .flexchild-vertical {
-            @apply(--layout-flex);
+            @apply --layout-flex;
           }
         </style>
 
@@ -111,16 +111,16 @@ <h4>Flex ratios</h4>
       <template>
         <style is="custom-style">
           .flex-horizontal-with-ratios {
-            @apply(--layout-horizontal);
+            @apply --layout-horizontal;
           }
           .flexchild {
-            @apply(--layout-flex);
+            @apply --layout-flex;
           }
           .flex2child {
-            @apply(--layout-flex-2);
+            @apply --layout-flex-2;
           }
           .flex3child {
-            @apply(--layout-flex-3);
+            @apply --layout-flex-3;
           }
         </style>
 
@@ -137,7 +137,7 @@ <h4>Cross-axis stretch alignment (default)</h4>
       <template>
         <style is="custom-style">
           .flex-stretch-align {
-            @apply(--layout-horizontal);
+            @apply --layout-horizontal;
             height: 120px;
           }
         </style>
@@ -153,8 +153,8 @@ <h4>Cross-axis center alignment</h4>
       <template>
         <style is="custom-style">
           .flex-center-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-center);
+            @apply --layout-horizontal;
+            @apply --layout-center;
             height: 120px;
           }
         </style>
@@ -170,8 +170,8 @@ <h4>Cross-axis start alignment</h4>
       <template>
         <style is="custom-style">
           .flex-start-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-start);
+            @apply --layout-horizontal;
+            @apply --layout-start;
             height: 120px;
           }
         </style>
@@ -187,8 +187,8 @@ <h4>Cross-axis end alignment</h4>
       <template>
         <style is="custom-style">
           .flex-end-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-end);
+            @apply --layout-horizontal;
+            @apply --layout-end;
             height: 120px;
           }
         </style>
@@ -204,8 +204,8 @@ <h4>Justification, start justified</h4>
       <template>
         <style is="custom-style">
           .flex-start-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-start-justified);
+            @apply --layout-horizontal;
+            @apply --layout-start-justified;
           }
         </style>
 
@@ -220,8 +220,8 @@ <h4>Justification, center justified</h4>
       <template>
         <style is="custom-style">
           .flex-center-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-center-justified);
+            @apply --layout-horizontal;
+            @apply --layout-center-justified;
           }
         </style>
 
@@ -236,8 +236,8 @@ <h4>Justification, end justified</h4>
       <template>
         <style is="custom-style">
           .flex-end-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-end-justified);
+            @apply --layout-horizontal;
+            @apply --layout-end-justified;
           }
         </style>
 
@@ -252,8 +252,8 @@ <h4>Justification, equal space between elements</h4>
       <template>
         <style is="custom-style">
           .flex-equal-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-justified);
+            @apply --layout-horizontal;
+            @apply --layout-justified;
           }
         </style>
 
@@ -270,8 +270,8 @@ <h4>Justification, equal space around each element</h4>
       <template>
         <style is="custom-style">
           .flex-equal-around-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-around-justified);
+            @apply --layout-horizontal;
+            @apply --layout-around-justified;
           }
         </style>
 
@@ -287,24 +287,24 @@ <h4>Self alignment</h4>
       <template>
         <style is="custom-style">
           .flex-self-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-justified);
+            @apply --layout-horizontal;
+            @apply --layout-justified;
             height: 120px;
           }
           .flex-self-align div {
-            @apply(--layout-flex);
+            @apply --layout-flex;
           }
           .child1 {
-            @apply(--layout-self-start);
+            @apply --layout-self-start;
           }
           .child2 {
-            @apply(--layout-self-center);
+            @apply --layout-self-center;
           }
           .child3 {
-            @apply(--layout-self-end);
+            @apply --layout-self-end;
           }
           .child4 {
-            @apply(--layout-self-stretch);
+            @apply --layout-self-stretch;
           }
         </style>
 
@@ -322,8 +322,8 @@ <h4>Wrapping</h4>
       <template>
         <style is="custom-style">
           .flex-wrap {
-            @apply(--layout-horizontal);
-            @apply(--layout-wrap);
+            @apply --layout-horizontal;
+            @apply --layout-wrap;
             width: 200px;
           }
         </style>
@@ -342,7 +342,7 @@ <h4>Reversed layouts</h4>
       <template>
         <style is="custom-style">
           .flex-reversed {
-            @apply(--layout-horizontal-reverse);
+            @apply --layout-horizontal-reverse;
           }
         </style>
 
@@ -368,16 +368,16 @@ <h4>General purpose rules</h4>
             margin: 12px;
           }
           .block {
-            @apply(--layout-block);
+            @apply --layout-block;
           }
           .invisible {
-            @apply(--layout-invisible);
+            @apply --layout-invisible;
           }
           .relative {
-            @apply(--layout-relative);
+            @apply --layout-relative;
           }
           .fit {
-            @apply(--layout-fit);
+            @apply --layout-fit;
           }
         </style>
 
diff --git a/index.html b/index.html
deleted file mode 100644
index 7d3b088..0000000
--- a/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-<head>
-
-  <title>iron-flex-layout</title>
-  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../iron-component-page/iron-component-page.html">
-
-</head>
-<body>
-
-  <iron-component-page></iron-component-page>
-
-</body>
-</html>
diff --git a/iron-flex-layout-classes.html b/iron-flex-layout-classes.html
index 6bf47f8..becd34c 100644
--- a/iron-flex-layout-classes.html
+++ b/iron-flex-layout-classes.html
@@ -66,12 +66,6 @@
         flex-wrap: wrap;
       }
 
-      .layout.no-wrap {
-        -ms-flex-wrap: nowrap;
-        -webkit-flex-wrap: nowrap;
-        flex-wrap: nowrap;
-      }
-
       .layout.center,
       .layout.center-center {
         -ms-flex-align: center;
@@ -370,11 +364,6 @@
         display: block;
       }
 
-      /* IE 10 support for HTML5 hidden attr */
-      [hidden] {
-        display: none !important;
-      }
-
       .invisible {
         visibility: hidden !important;
       }
diff --git a/iron-flex-layout.html b/iron-flex-layout.html
index a14a872..4177bf5 100644
--- a/iron-flex-layout.html
+++ b/iron-flex-layout.html
@@ -45,16 +45,8 @@
 @pseudoElement iron-flex-layout
 @demo demo/index.html
 -->
-
-<style>
-  /* IE 10 support for HTML5 hidden attr */
-  [hidden] {
-    display: none !important;
-  }
-</style>
-
 <style is="custom-style">
-  :root {
+  html {
 
     --layout: {
       display: -ms-flexbox;
@@ -69,7 +61,7 @@
     };
 
     --layout-horizontal: {
-      @apply(--layout);
+      @apply --layout;
 
       -ms-flex-direction: row;
       -webkit-flex-direction: row;
@@ -77,7 +69,7 @@
     };
 
     --layout-horizontal-reverse: {
-      @apply(--layout);
+      @apply --layout;
 
       -ms-flex-direction: row-reverse;
       -webkit-flex-direction: row-reverse;
@@ -85,7 +77,7 @@
     };
 
     --layout-vertical: {
-      @apply(--layout);
+      @apply --layout;
 
       -ms-flex-direction: column;
       -webkit-flex-direction: column;
@@ -93,7 +85,7 @@
     };
 
     --layout-vertical-reverse: {
-      @apply(--layout);
+      @apply --layout;
 
       -ms-flex-direction: column-reverse;
       -webkit-flex-direction: column-reverse;
@@ -105,12 +97,6 @@
       -webkit-flex-wrap: wrap;
       flex-wrap: wrap;
     };
-    
-    --layout-no-wrap: {
-      -ms-flex-wrap: nowrap;
-      -webkit-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-    };
 
     --layout-wrap-reverse: {
       -ms-flex-wrap: wrap-reverse;
@@ -263,8 +249,8 @@
     };
 
     --layout-center-center: {
-      @apply(--layout-center);
-      @apply(--layout-center-justified);
+      @apply --layout-center;
+      @apply --layout-center-justified;
     };
 
     /* self alignment */
diff --git a/test/iron-flex-layout.html b/test/iron-flex-layout.html
index f209087..d376965 100644
--- a/test/iron-flex-layout.html
+++ b/test/iron-flex-layout.html
@@ -41,7 +41,7 @@
         min-height: 0;
         height: 50px;
       }
-      .relative { @apply(--layout-relative); }
+      .relative { @apply --layout-relative; }
       .container.relative > div {
         min-width: 50px;
         min-height: 50px;
@@ -56,29 +56,29 @@
       #c4 { background-color: #03A9F4; }
       #c5 { background-color: #E91E63; }
 
-      .horizontal { @apply(--layout-horizontal); }
-      .horizontal-reverse { @apply(--layout-horizontal-reverse); }
-      .vertical { @apply(--layout-vertical); }
-      .vertical-reverse { @apply(--layout-vertical-reverse); }
-      .wrap { @apply(--layout-wrap); }
-      .wrap-reverse { @apply(--layout-wrap-reverse); }
-      .flex { @apply(--layout-flex); }
-      .flex2 { @apply(--layout-flex-2); }
-      .flex3 { @apply(--layout-flex-3); }
-      .center { @apply(--layout-center); }
-      .start { @apply(--layout-start); }
-      .end { @apply(--layout-end); }
-      .start-justified { @apply(--layout-start-justified); }
-      .center-justified { @apply(--layout-center-justified); }
-      .end-justified { @apply(--layout-end-justified); }
-      .justified { @apply(--layout-justified); }
-      .around-justified { @apply(--layout-around-justified); }
-      .fit { @apply(--layout-fit); }
-      .start-aligned { @apply(--layout-start-aligned); }
-      .end-aligned { @apply(--layout-end-aligned); }
-      .center-aligned { @apply(--layout-center-aligned); }
-      .between-aligned { @apply(--layout-between-aligned); }
-      .around-aligned { @apply(--layout-around-aligned); }
+      .horizontal { @apply --layout-horizontal; }
+      .horizontal-reverse { @apply --layout-horizontal-reverse; }
+      .vertical { @apply --layout-vertical; }
+      .vertical-reverse { @apply --layout-vertical-reverse; }
+      .wrap { @apply --layout-wrap; }
+      .wrap-reverse { @apply --layout-wrap-reverse; }
+      .flex { @apply --layout-flex; }
+      .flex2 { @apply --layout-flex-2; }
+      .flex3 { @apply --layout-flex-3; }
+      .center { @apply --layout-center; }
+      .start { @apply --layout-start; }
+      .end { @apply --layout-end; }
+      .start-justified { @apply --layout-start-justified; }
+      .center-justified { @apply --layout-center-justified; }
+      .end-justified { @apply --layout-end-justified; }
+      .justified { @apply --layout-justified; }
+      .around-justified { @apply --layout-around-justified; }
+      .fit { @apply --layout-fit; }
+      .start-aligned { @apply --layout-start-aligned; }
+      .end-aligned { @apply --layout-end-aligned; }
+      .center-aligned { @apply --layout-center-aligned; }
+      .between-aligned { @apply --layout-between-aligned; }
+      .around-aligned { @apply --layout-around-aligned; }
 
     </style>
   </head>
@@ -133,7 +133,7 @@
     <script>
       function positionEquals(node, top, bottom, left, right) {
         var rect = node.getBoundingClientRect();
-        return rect.top === top && rect.bottom === bottom && 
+        return rect.top === top && rect.bottom === bottom &&
                rect.left === left && rect.right === right;
       }
       suite('basic layout', function() {

From 50d4ac452ebc67fffbe9df3f3cc446f9e8536ce2 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Tue, 23 Aug 2016 14:57:32 -0700
Subject: [PATCH 02/19] workaround root/html issue

---
 CONTRIBUTING.md       |  77 ++++++++++
 README.md             |  55 +++++++
 demo/index.html       |   8 +-
 index.html            |  24 +++
 iron-flex-layout.html | 345 +++++++++++++++++++++++++++++++++++++++++-
 5 files changed, 505 insertions(+), 4 deletions(-)
 create mode 100644 CONTRIBUTING.md
 create mode 100644 README.md
 create mode 100644 index.html

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..093090d
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,77 @@
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+
+# Polymer Elements
+## Guide for Contributors
+
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+
+### Filing Issues
+
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+
+**If you are filing an issue to report a bug**, please provide:
+
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+
+ ## Expected outcome
+
+ The page stays the same color.
+
+ ## Actual outcome
+
+ The page turns pink.
+
+ ## Steps to reproduce
+
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+
+### Submitting Pull Requests
+
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+
+When submitting pull requests, please provide:
+
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..219fca7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,55 @@
+
+<!---
+
+This README is automatically generated from the comments in these files:
+iron-flex-layout.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+The bot does some handling of markdown. Please file a bug if it does the wrong
+thing! https://github.com/PolymerLabs/tedium/issues
+
+-->
+
+[![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
+
+_[Demo and API docs](https://elements.polymer-project.org/elements/iron-flex-layout)_
+
+
+##&lt;iron-flex-layout&gt;
+
+The `<iron-flex-layout>` component provides simple ways to use
+[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
+also known as flexbox. This component provides two different ways to use flexbox:
+
+1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
+The layout class stylesheet provides a simple set of class-based flexbox rules, that
+let you specify layout properties directly in markup. You must include this file
+in every element that needs to use them.
+
+Sample use:
+
+   <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+
+   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+
+   <div class="layout horizontal layout-start">
+     <div>cross axis start alignment</div>
+   </div>
+
+1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
+The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
+
+
+
+Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
+are deprecated, and should not be used. To continue using layout properties
+directly in markup, please switch to using the new `dom-module`-based
+[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
+Please note that the new version does not use `/deep/`, and therefore requires you
+to import the `dom-modules` in every element that needs to use them.
+
+A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
+
+
diff --git a/demo/index.html b/demo/index.html
index 60d9df7..1e95a14 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -19,13 +19,14 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../iron-flex-layout.html">
 
-  <style is="custom-style">
+  <style is="custom-style" include="demo-pages-shared-styles">
     demo-snippet {
       --demo-snippet-demo: {
         padding: 0;
-      }
+      };
     }
 
     .container {
@@ -33,6 +34,7 @@
       padding: 5px;
       margin: 0;
     }
+
     .container > div {
       padding: 15px;
       margin: 5px;
@@ -48,7 +50,7 @@
 
 </head>
 <body unresolved class="fullbleed">
-  <div class="main-container">
+  <div class="vertical-section-container centered">
     <h4>Horizontal and vertical layout</h4>
     <demo-snippet>
       <template>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7d3b088
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>iron-flex-layout</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/iron-flex-layout.html b/iron-flex-layout.html
index 4177bf5..dd09adb 100644
--- a/iron-flex-layout.html
+++ b/iron-flex-layout.html
@@ -46,7 +46,9 @@
 @demo demo/index.html
 -->
 <style is="custom-style">
-  html {
+  /* TODO(notwaldorf): remove duplicated :root/html styles when https://github.com/PolymerLabs/alacarte/issues/83
+   is fixed */
+  :root {
 
     --layout: {
       display: -ms-flexbox;
@@ -388,4 +390,345 @@
 
   }
 
+  html {
+
+    --layout: {
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+    };
+
+    --layout-inline: {
+      display: -ms-inline-flexbox;
+      display: -webkit-inline-flex;
+      display: inline-flex;
+    };
+
+    --layout-horizontal: {
+      @apply --layout;
+
+      -ms-flex-direction: row;
+      -webkit-flex-direction: row;
+      flex-direction: row;
+    };
+
+    --layout-horizontal-reverse: {
+      @apply --layout;
+
+      -ms-flex-direction: row-reverse;
+      -webkit-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+    };
+
+    --layout-vertical: {
+      @apply --layout;
+
+      -ms-flex-direction: column;
+      -webkit-flex-direction: column;
+      flex-direction: column;
+    };
+
+    --layout-vertical-reverse: {
+      @apply --layout;
+
+      -ms-flex-direction: column-reverse;
+      -webkit-flex-direction: column-reverse;
+      flex-direction: column-reverse;
+    };
+
+    --layout-wrap: {
+      -ms-flex-wrap: wrap;
+      -webkit-flex-wrap: wrap;
+      flex-wrap: wrap;
+    };
+
+    --layout-wrap-reverse: {
+      -ms-flex-wrap: wrap-reverse;
+      -webkit-flex-wrap: wrap-reverse;
+      flex-wrap: wrap-reverse;
+    };
+
+    --layout-flex-auto: {
+      -ms-flex: 1 1 auto;
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+    };
+
+    --layout-flex-none: {
+      -ms-flex: none;
+      -webkit-flex: none;
+      flex: none;
+    };
+
+    --layout-flex: {
+      -ms-flex: 1 1 0.000000001px;
+      -webkit-flex: 1;
+      flex: 1;
+      -webkit-flex-basis: 0.000000001px;
+      flex-basis: 0.000000001px;
+    };
+
+    --layout-flex-2: {
+      -ms-flex: 2;
+      -webkit-flex: 2;
+      flex: 2;
+    };
+
+    --layout-flex-3: {
+      -ms-flex: 3;
+      -webkit-flex: 3;
+      flex: 3;
+    };
+
+    --layout-flex-4: {
+      -ms-flex: 4;
+      -webkit-flex: 4;
+      flex: 4;
+    };
+
+    --layout-flex-5: {
+      -ms-flex: 5;
+      -webkit-flex: 5;
+      flex: 5;
+    };
+
+    --layout-flex-6: {
+      -ms-flex: 6;
+      -webkit-flex: 6;
+      flex: 6;
+    };
+
+    --layout-flex-7: {
+      -ms-flex: 7;
+      -webkit-flex: 7;
+      flex: 7;
+    };
+
+    --layout-flex-8: {
+      -ms-flex: 8;
+      -webkit-flex: 8;
+      flex: 8;
+    };
+
+    --layout-flex-9: {
+      -ms-flex: 9;
+      -webkit-flex: 9;
+      flex: 9;
+    };
+
+    --layout-flex-10: {
+      -ms-flex: 10;
+      -webkit-flex: 10;
+      flex: 10;
+    };
+
+    --layout-flex-11: {
+      -ms-flex: 11;
+      -webkit-flex: 11;
+      flex: 11;
+    };
+
+    --layout-flex-12: {
+      -ms-flex: 12;
+      -webkit-flex: 12;
+      flex: 12;
+    };
+
+    /* alignment in cross axis */
+
+    --layout-start: {
+      -ms-flex-align: start;
+      -webkit-align-items: flex-start;
+      align-items: flex-start;
+    };
+
+    --layout-center: {
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      align-items: center;
+    };
+
+    --layout-end: {
+      -ms-flex-align: end;
+      -webkit-align-items: flex-end;
+      align-items: flex-end;
+    };
+
+    --layout-baseline: {
+      -ms-flex-align: baseline;
+      -webkit-align-items: baseline;
+      align-items: baseline;
+    };
+
+    /* alignment in main axis */
+
+    --layout-start-justified: {
+      -ms-flex-pack: start;
+      -webkit-justify-content: flex-start;
+      justify-content: flex-start;
+    };
+
+    --layout-center-justified: {
+      -ms-flex-pack: center;
+      -webkit-justify-content: center;
+      justify-content: center;
+    };
+
+    --layout-end-justified: {
+      -ms-flex-pack: end;
+      -webkit-justify-content: flex-end;
+      justify-content: flex-end;
+    };
+
+    --layout-around-justified: {
+      -ms-flex-pack: distribute;
+      -webkit-justify-content: space-around;
+      justify-content: space-around;
+    };
+
+    --layout-justified: {
+      -ms-flex-pack: justify;
+      -webkit-justify-content: space-between;
+      justify-content: space-between;
+    };
+
+    --layout-center-center: {
+      @apply --layout-center;
+      @apply --layout-center-justified;
+    };
+
+    /* self alignment */
+
+    --layout-self-start: {
+      -ms-align-self: flex-start;
+      -webkit-align-self: flex-start;
+      align-self: flex-start;
+    };
+
+    --layout-self-center: {
+      -ms-align-self: center;
+      -webkit-align-self: center;
+      align-self: center;
+    };
+
+    --layout-self-end: {
+      -ms-align-self: flex-end;
+      -webkit-align-self: flex-end;
+      align-self: flex-end;
+    };
+
+    --layout-self-stretch: {
+      -ms-align-self: stretch;
+      -webkit-align-self: stretch;
+      align-self: stretch;
+    };
+
+    --layout-self-baseline: {
+      -ms-align-self: baseline;
+      -webkit-align-self: baseline;
+      align-self: baseline;
+    };
+
+    /* multi-line alignment in main axis */
+
+    --layout-start-aligned: {
+      -ms-flex-line-pack: start;  /* IE10 */
+      -ms-align-content: flex-start;
+      -webkit-align-content: flex-start;
+      align-content: flex-start;
+    };
+
+    --layout-end-aligned: {
+      -ms-flex-line-pack: end;  /* IE10 */
+      -ms-align-content: flex-end;
+      -webkit-align-content: flex-end;
+      align-content: flex-end;
+    };
+
+    --layout-center-aligned: {
+      -ms-flex-line-pack: center;  /* IE10 */
+      -ms-align-content: center;
+      -webkit-align-content: center;
+      align-content: center;
+    };
+
+    --layout-between-aligned: {
+      -ms-flex-line-pack: justify;  /* IE10 */
+      -ms-align-content: space-between;
+      -webkit-align-content: space-between;
+      align-content: space-between;
+    };
+
+    --layout-around-aligned: {
+      -ms-flex-line-pack: distribute;  /* IE10 */
+      -ms-align-content: space-around;
+      -webkit-align-content: space-around;
+      align-content: space-around;
+    };
+
+    /*******************************
+              Other Layout
+    *******************************/
+
+    --layout-block: {
+      display: block;
+    };
+
+    --layout-invisible: {
+      visibility: hidden !important;
+    };
+
+    --layout-relative: {
+      position: relative;
+    };
+
+    --layout-fit: {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    };
+
+    --layout-scroll: {
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+    };
+
+    --layout-fullbleed: {
+      margin: 0;
+      height: 100vh;
+    };
+
+    /* fixed position */
+
+    --layout-fixed-top: {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+    };
+
+    --layout-fixed-right: {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    };
+
+    --layout-fixed-bottom: {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    };
+
+    --layout-fixed-left: {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    };
+
+  }
 </style>

From c2a0cb39fd8c2fbfa3a2ed1f4139e4e16bdd622b Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Wed, 24 Aug 2016 17:20:08 -0700
Subject: [PATCH 03/19] fix deps

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 352224c..9d116e8 100644
--- a/bower.json
+++ b/bower.json
@@ -24,7 +24,7 @@
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#v1-polymer-edits",
     "web-component-tester": "^4.0.0",
-    "iron-demo-helpers": "notwaldorf/iron-demo-helpers#2.0-preview"
+    "iron-demo-helpers": "https://github.com/notwaldorf/iron-demo-helpers.git#2.0-preview"
   },
   "ignore": []
 }

From 184f0a9afb03a21f050f8abaddb5af76e78b6748 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Wed, 7 Sep 2016 10:40:21 -0700
Subject: [PATCH 04/19] update to new custom-style syntax

---
 bower.json                         | 13 +++---
 demo/index.html                    | 72 +++++++++++++++---------------
 iron-flex-layout.html              |  4 +-
 test/iron-flex-layout-classes.html |  8 ++--
 test/iron-flex-layout.html         |  6 +--
 5 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/bower.json b/bower.json
index 9d116e8..37a9404 100644
--- a/bower.json
+++ b/bower.json
@@ -18,13 +18,16 @@
     "url": "git://github.com/PolymerElements/iron-flex-layout.git"
   },
   "dependencies": {
-    "polymer": "https://github.com/PolymerLabs/alacarte.git#master"
+    "polymer": "polymer/polymer#2.0-preview"
   },
   "devDependencies": {
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#v1-polymer-edits",
+    "test-fixture": "PolymerElements/test-fixture#custom-elements-v1",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#v1",
     "web-component-tester": "^4.0.0",
-    "iron-demo-helpers": "https://github.com/notwaldorf/iron-demo-helpers.git#2.0-preview"
+    "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
   },
-  "ignore": []
+  "ignore": [],
+  "resolutions": {
+    "test-fixture": "custom-elements-v1"
+  }
 }
diff --git a/demo/index.html b/demo/index.html
index 1e95a14..b435b86 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -22,7 +22,7 @@
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../iron-flex-layout.html">
 
-  <style is="custom-style" include="demo-pages-shared-styles">
+  <custom-style><style is="custom-style" include="demo-pages-shared-styles">
     demo-snippet {
       --demo-snippet-demo: {
         padding: 0;
@@ -46,7 +46,7 @@
       max-width: 600px;
       margin: 0 auto;
     }
-  </style>
+  </style></custom-style>
 
 </head>
 <body unresolved class="fullbleed">
@@ -54,11 +54,11 @@
     <h4>Horizontal and vertical layout</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex {
             @apply --layout-horizontal;
           }
-        </style>
+        </style></custom-style>
         <div class="container flex">
           <div>one</div>
           <div>two</div>
@@ -70,14 +70,14 @@ <h4>Horizontal and vertical layout</h4>
     <h4>Flexible children</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-horizontal {
             @apply --layout-horizontal;
           }
           .flexchild {
             @apply --layout-flex;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-horizontal">
           <div>one</div>
@@ -90,7 +90,7 @@ <h4>Flexible children</h4>
     <h4>Flexible children in vertical layouts</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-vertical {
             @apply --layout-vertical;
             height: 220px;
@@ -98,7 +98,7 @@ <h4>Flexible children in vertical layouts</h4>
           .flexchild-vertical {
             @apply --layout-flex;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-vertical">
           <div>one</div>
@@ -111,7 +111,7 @@ <h4>Flexible children in vertical layouts</h4>
     <h4>Flex ratios</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-horizontal-with-ratios {
             @apply --layout-horizontal;
           }
@@ -124,7 +124,7 @@ <h4>Flex ratios</h4>
           .flex3child {
             @apply --layout-flex-3;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-horizontal-with-ratios">
           <div class="flex3child">one</div>
@@ -137,12 +137,12 @@ <h4>Flex ratios</h4>
     <h4>Cross-axis stretch alignment (default)</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-stretch-align {
             @apply --layout-horizontal;
             height: 120px;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-stretch-align">
           <div>stretch</div>
@@ -153,13 +153,13 @@ <h4>Cross-axis stretch alignment (default)</h4>
     <h4>Cross-axis center alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-center-align {
             @apply --layout-horizontal;
             @apply --layout-center;
             height: 120px;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-center-align">
           <div>center</div>
@@ -170,13 +170,13 @@ <h4>Cross-axis center alignment</h4>
     <h4>Cross-axis start alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-start-align {
             @apply --layout-horizontal;
             @apply --layout-start;
             height: 120px;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-start-align">
           <div>start</div>
@@ -187,13 +187,13 @@ <h4>Cross-axis start alignment</h4>
     <h4>Cross-axis end alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-end-align {
             @apply --layout-horizontal;
             @apply --layout-end;
             height: 120px;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-end-align">
           <div>end</div>
@@ -204,12 +204,12 @@ <h4>Cross-axis end alignment</h4>
     <h4>Justification, start justified</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-start-justified {
             @apply --layout-horizontal;
             @apply --layout-start-justified;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-start-justified">
           <div>start-justified</div>
@@ -220,12 +220,12 @@ <h4>Justification, start justified</h4>
     <h4>Justification, center justified</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-center-justified {
             @apply --layout-horizontal;
             @apply --layout-center-justified;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-center-justified">
           <div>center-justified</div>
@@ -236,12 +236,12 @@ <h4>Justification, center justified</h4>
     <h4>Justification, end justified</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-end-justified {
             @apply --layout-horizontal;
             @apply --layout-end-justified;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-end-justified">
           <div>end-justified</div>
@@ -252,12 +252,12 @@ <h4>Justification, end justified</h4>
     <h4>Justification, equal space between elements</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-equal-justified {
             @apply --layout-horizontal;
             @apply --layout-justified;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-equal-justified">
           <div>justified</div>
@@ -270,12 +270,12 @@ <h4>Justification, equal space between elements</h4>
     <h4>Justification, equal space around each element</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-equal-around-justified {
             @apply --layout-horizontal;
             @apply --layout-around-justified;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-equal-around-justified">
           <div>around-justified</div>
@@ -287,7 +287,7 @@ <h4>Justification, equal space around each element</h4>
     <h4>Self alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-self-align {
             @apply --layout-horizontal;
             @apply --layout-justified;
@@ -308,7 +308,7 @@ <h4>Self alignment</h4>
           .child4 {
             @apply --layout-self-stretch;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-self-align">
           <div class="child1">one</div>
@@ -322,13 +322,13 @@ <h4>Self alignment</h4>
     <h4>Wrapping</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-wrap {
             @apply --layout-horizontal;
             @apply --layout-wrap;
             width: 200px;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-wrap">
           <div>one</div>
@@ -342,11 +342,11 @@ <h4>Wrapping</h4>
     <h4>Reversed layouts</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .flex-reversed {
             @apply --layout-horizontal-reverse;
           }
-        </style>
+        </style></custom-style>
 
         <div class="container flex-reversed">
           <div>one</div>
@@ -360,7 +360,7 @@ <h4>Reversed layouts</h4>
     <h4>General purpose rules</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
+        <custom-style><style is="custom-style">
           .general {
             width: 100%;
           }
@@ -381,7 +381,7 @@ <h4>General purpose rules</h4>
           .fit {
             @apply --layout-fit;
           }
-        </style>
+        </style></custom-style>
 
         <div class="general">
           <div>Before <span>[A Span]</span> After</div>
diff --git a/iron-flex-layout.html b/iron-flex-layout.html
index dd09adb..a7f78f3 100644
--- a/iron-flex-layout.html
+++ b/iron-flex-layout.html
@@ -45,7 +45,7 @@
 @pseudoElement iron-flex-layout
 @demo demo/index.html
 -->
-<style is="custom-style">
+<custom-style><style is="custom-style">
   /* TODO(notwaldorf): remove duplicated :root/html styles when https://github.com/PolymerLabs/alacarte/issues/83
    is fixed */
   :root {
@@ -731,4 +731,4 @@
     };
 
   }
-</style>
+</style></custom-style>
diff --git a/test/iron-flex-layout-classes.html b/test/iron-flex-layout-classes.html
index 3173b30..502ebfa 100644
--- a/test/iron-flex-layout-classes.html
+++ b/test/iron-flex-layout-classes.html
@@ -16,11 +16,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="../iron-flex-layout-classes.html">
 
-    <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
+    <custom-style><style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
       body {
         margin: 0;
         padding: 0;
@@ -54,7 +54,7 @@
       #c3 { background-color: #CDDC39; }
       #c4 { background-color: #03A9F4; }
       #c5 { background-color: #E91E63; }
-    </style>
+    </style></custom-style>
   </head>
   <body>
     <test-fixture id="basic">
@@ -107,7 +107,7 @@
     <script>
       function positionEquals(node, top, bottom, left, right) {
         var rect = node.getBoundingClientRect();
-        return rect.top === top && rect.bottom === bottom && 
+        return rect.top === top && rect.bottom === bottom &&
                rect.left === left && rect.right === right;
       }
       suite('basic layout', function() {
diff --git a/test/iron-flex-layout.html b/test/iron-flex-layout.html
index d376965..6c70add 100644
--- a/test/iron-flex-layout.html
+++ b/test/iron-flex-layout.html
@@ -16,11 +16,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="../iron-flex-layout.html">
 
-    <style is="custom-style">
+    <custom-style><style is="custom-style">
       body {
         margin: 0;
         padding: 0;
@@ -80,7 +80,7 @@
       .between-aligned { @apply --layout-between-aligned; }
       .around-aligned { @apply --layout-around-aligned; }
 
-    </style>
+    </style></custom-style>
   </head>
   <body>
     <test-fixture id="basic">

From 2ccad6ff222265861187de135a26ffac99410189 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Mon, 26 Sep 2016 16:57:37 -0700
Subject: [PATCH 05/19] fix indentation; remove temp code

---
 demo/index.html                    |  384 ++++++-----
 iron-flex-layout.html              | 1032 ++++++++++------------------
 test/iron-flex-layout-classes.html |   72 +-
 test/iron-flex-layout.html         |  123 ++--
 4 files changed, 654 insertions(+), 957 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index b435b86..e9d0315 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -22,31 +22,33 @@
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../iron-flex-layout.html">
 
-  <custom-style><style is="custom-style" include="demo-pages-shared-styles">
-    demo-snippet {
-      --demo-snippet-demo: {
-        padding: 0;
-      };
-    }
-
-    .container {
-      background-color: #ccc;
-      padding: 5px;
-      margin: 0;
-    }
-
-    .container > div {
-      padding: 15px;
-      margin: 5px;
-      background-color: white;
-      min-height: 20px;
-    }
-
-    .main-container {
-      max-width: 600px;
-      margin: 0 auto;
-    }
-  </style></custom-style>
+  <custom-style>
+    <style is="custom-style" include="demo-pages-shared-styles">
+      demo-snippet {
+        --demo-snippet-demo: {
+          padding: 0;
+        };
+      }
+
+      .container {
+        background-color: #ccc;
+        padding: 5px;
+        margin: 0;
+      }
+
+      .container > div {
+        padding: 15px;
+        margin: 5px;
+        background-color: white;
+        min-height: 20px;
+      }
+
+      .main-container {
+        max-width: 600px;
+        margin: 0 auto;
+      }
+    </style>
+  </custom-style>
 
 </head>
 <body unresolved class="fullbleed">
@@ -54,11 +56,13 @@
     <h4>Horizontal and vertical layout</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex {
-            @apply --layout-horizontal;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex {
+              @apply --layout-horizontal;
+            }
+          </style>
+        </custom-style>
         <div class="container flex">
           <div>one</div>
           <div>two</div>
@@ -70,14 +74,16 @@ <h4>Horizontal and vertical layout</h4>
     <h4>Flexible children</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-horizontal {
-            @apply --layout-horizontal;
-          }
-          .flexchild {
-            @apply --layout-flex;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-horizontal {
+              @apply --layout-horizontal;
+            }
+            .flexchild {
+              @apply --layout-flex;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-horizontal">
           <div>one</div>
@@ -90,15 +96,17 @@ <h4>Flexible children</h4>
     <h4>Flexible children in vertical layouts</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-vertical {
-            @apply --layout-vertical;
-            height: 220px;
-          }
-          .flexchild-vertical {
-            @apply --layout-flex;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-vertical {
+              @apply --layout-vertical;
+              height: 220px;
+            }
+            .flexchild-vertical {
+              @apply --layout-flex;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-vertical">
           <div>one</div>
@@ -111,20 +119,22 @@ <h4>Flexible children in vertical layouts</h4>
     <h4>Flex ratios</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-horizontal-with-ratios {
-            @apply --layout-horizontal;
-          }
-          .flexchild {
-            @apply --layout-flex;
-          }
-          .flex2child {
-            @apply --layout-flex-2;
-          }
-          .flex3child {
-            @apply --layout-flex-3;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-horizontal-with-ratios {
+              @apply --layout-horizontal;
+            }
+            .flexchild {
+              @apply --layout-flex;
+            }
+            .flex2child {
+              @apply --layout-flex-2;
+            }
+            .flex3child {
+              @apply --layout-flex-3;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-horizontal-with-ratios">
           <div class="flex3child">one</div>
@@ -137,12 +147,14 @@ <h4>Flex ratios</h4>
     <h4>Cross-axis stretch alignment (default)</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-stretch-align {
-            @apply --layout-horizontal;
-            height: 120px;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-stretch-align {
+              @apply --layout-horizontal;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-stretch-align">
           <div>stretch</div>
@@ -153,13 +165,15 @@ <h4>Cross-axis stretch alignment (default)</h4>
     <h4>Cross-axis center alignment</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-center-align {
-            @apply --layout-horizontal;
-            @apply --layout-center;
-            height: 120px;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-center-align {
+              @apply --layout-horizontal;
+              @apply --layout-center;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-center-align">
           <div>center</div>
@@ -170,13 +184,15 @@ <h4>Cross-axis center alignment</h4>
     <h4>Cross-axis start alignment</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-start-align {
-            @apply --layout-horizontal;
-            @apply --layout-start;
-            height: 120px;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-start-align {
+              @apply --layout-horizontal;
+              @apply --layout-start;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-start-align">
           <div>start</div>
@@ -187,13 +203,15 @@ <h4>Cross-axis start alignment</h4>
     <h4>Cross-axis end alignment</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-end-align {
-            @apply --layout-horizontal;
-            @apply --layout-end;
-            height: 120px;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-end-align {
+              @apply --layout-horizontal;
+              @apply --layout-end;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-end-align">
           <div>end</div>
@@ -204,12 +222,14 @@ <h4>Cross-axis end alignment</h4>
     <h4>Justification, start justified</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-start-justified {
-            @apply --layout-horizontal;
-            @apply --layout-start-justified;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-start-justified {
+              @apply --layout-horizontal;
+              @apply --layout-start-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-start-justified">
           <div>start-justified</div>
@@ -220,12 +240,14 @@ <h4>Justification, start justified</h4>
     <h4>Justification, center justified</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-center-justified {
-            @apply --layout-horizontal;
-            @apply --layout-center-justified;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-center-justified {
+              @apply --layout-horizontal;
+              @apply --layout-center-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-center-justified">
           <div>center-justified</div>
@@ -236,12 +258,14 @@ <h4>Justification, center justified</h4>
     <h4>Justification, end justified</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-end-justified {
-            @apply --layout-horizontal;
-            @apply --layout-end-justified;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-end-justified {
+              @apply --layout-horizontal;
+              @apply --layout-end-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-end-justified">
           <div>end-justified</div>
@@ -252,12 +276,14 @@ <h4>Justification, end justified</h4>
     <h4>Justification, equal space between elements</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-equal-justified {
-            @apply --layout-horizontal;
-            @apply --layout-justified;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-equal-justified {
+              @apply --layout-horizontal;
+              @apply --layout-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-equal-justified">
           <div>justified</div>
@@ -270,12 +296,14 @@ <h4>Justification, equal space between elements</h4>
     <h4>Justification, equal space around each element</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-equal-around-justified {
-            @apply --layout-horizontal;
-            @apply --layout-around-justified;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-equal-around-justified {
+              @apply --layout-horizontal;
+              @apply --layout-around-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-equal-around-justified">
           <div>around-justified</div>
@@ -287,28 +315,30 @@ <h4>Justification, equal space around each element</h4>
     <h4>Self alignment</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-self-align {
-            @apply --layout-horizontal;
-            @apply --layout-justified;
-            height: 120px;
-          }
-          .flex-self-align div {
-            @apply --layout-flex;
-          }
-          .child1 {
-            @apply --layout-self-start;
-          }
-          .child2 {
-            @apply --layout-self-center;
-          }
-          .child3 {
-            @apply --layout-self-end;
-          }
-          .child4 {
-            @apply --layout-self-stretch;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-self-align {
+              @apply --layout-horizontal;
+              @apply --layout-justified;
+              height: 120px;
+            }
+            .flex-self-align div {
+              @apply --layout-flex;
+            }
+            .child1 {
+              @apply --layout-self-start;
+            }
+            .child2 {
+              @apply --layout-self-center;
+            }
+            .child3 {
+              @apply --layout-self-end;
+            }
+            .child4 {
+              @apply --layout-self-stretch;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-self-align">
           <div class="child1">one</div>
@@ -322,13 +352,15 @@ <h4>Self alignment</h4>
     <h4>Wrapping</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-wrap {
-            @apply --layout-horizontal;
-            @apply --layout-wrap;
-            width: 200px;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-wrap {
+              @apply --layout-horizontal;
+              @apply --layout-wrap;
+              width: 200px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-wrap">
           <div>one</div>
@@ -342,11 +374,13 @@ <h4>Wrapping</h4>
     <h4>Reversed layouts</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .flex-reversed {
-            @apply --layout-horizontal-reverse;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-reversed {
+              @apply --layout-horizontal-reverse;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-reversed">
           <div>one</div>
@@ -360,28 +394,30 @@ <h4>Reversed layouts</h4>
     <h4>General purpose rules</h4>
     <demo-snippet>
       <template>
-        <custom-style><style is="custom-style">
-          .general {
-            width: 100%;
-          }
-          .general > div {
-            background-color: #ccc;
-            padding: 4px;
-            margin: 12px;
-          }
-          .block {
-            @apply --layout-block;
-          }
-          .invisible {
-            @apply --layout-invisible;
-          }
-          .relative {
-            @apply --layout-relative;
-          }
-          .fit {
-            @apply --layout-fit;
-          }
-        </style></custom-style>
+        <custom-style>
+          <style is="custom-style">
+            .general {
+              width: 100%;
+            }
+            .general > div {
+              background-color: #ccc;
+              padding: 4px;
+              margin: 12px;
+            }
+            .block {
+              @apply --layout-block;
+            }
+            .invisible {
+              @apply --layout-invisible;
+            }
+            .relative {
+              @apply --layout-relative;
+            }
+            .fit {
+              @apply --layout-fit;
+            }
+          </style>
+        </custom-style>
 
         <div class="general">
           <div>Before <span>[A Span]</span> After</div>
diff --git a/iron-flex-layout.html b/iron-flex-layout.html
index a7f78f3..c839a65 100644
--- a/iron-flex-layout.html
+++ b/iron-flex-layout.html
@@ -45,690 +45,348 @@
 @pseudoElement iron-flex-layout
 @demo demo/index.html
 -->
-<custom-style><style is="custom-style">
-  /* TODO(notwaldorf): remove duplicated :root/html styles when https://github.com/PolymerLabs/alacarte/issues/83
-   is fixed */
-  :root {
-
-    --layout: {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-    };
-
-    --layout-inline: {
-      display: -ms-inline-flexbox;
-      display: -webkit-inline-flex;
-      display: inline-flex;
-    };
-
-    --layout-horizontal: {
-      @apply --layout;
-
-      -ms-flex-direction: row;
-      -webkit-flex-direction: row;
-      flex-direction: row;
-    };
-
-    --layout-horizontal-reverse: {
-      @apply --layout;
-
-      -ms-flex-direction: row-reverse;
-      -webkit-flex-direction: row-reverse;
-      flex-direction: row-reverse;
-    };
-
-    --layout-vertical: {
-      @apply --layout;
-
-      -ms-flex-direction: column;
-      -webkit-flex-direction: column;
-      flex-direction: column;
-    };
-
-    --layout-vertical-reverse: {
-      @apply --layout;
-
-      -ms-flex-direction: column-reverse;
-      -webkit-flex-direction: column-reverse;
-      flex-direction: column-reverse;
-    };
-
-    --layout-wrap: {
-      -ms-flex-wrap: wrap;
-      -webkit-flex-wrap: wrap;
-      flex-wrap: wrap;
-    };
-
-    --layout-wrap-reverse: {
-      -ms-flex-wrap: wrap-reverse;
-      -webkit-flex-wrap: wrap-reverse;
-      flex-wrap: wrap-reverse;
-    };
-
-    --layout-flex-auto: {
-      -ms-flex: 1 1 auto;
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-    };
-
-    --layout-flex-none: {
-      -ms-flex: none;
-      -webkit-flex: none;
-      flex: none;
-    };
-
-    --layout-flex: {
-      -ms-flex: 1 1 0.000000001px;
-      -webkit-flex: 1;
-      flex: 1;
-      -webkit-flex-basis: 0.000000001px;
-      flex-basis: 0.000000001px;
-    };
-
-    --layout-flex-2: {
-      -ms-flex: 2;
-      -webkit-flex: 2;
-      flex: 2;
-    };
-
-    --layout-flex-3: {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    };
-
-    --layout-flex-4: {
-      -ms-flex: 4;
-      -webkit-flex: 4;
-      flex: 4;
-    };
-
-    --layout-flex-5: {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    };
-
-    --layout-flex-6: {
-      -ms-flex: 6;
-      -webkit-flex: 6;
-      flex: 6;
-    };
-
-    --layout-flex-7: {
-      -ms-flex: 7;
-      -webkit-flex: 7;
-      flex: 7;
-    };
-
-    --layout-flex-8: {
-      -ms-flex: 8;
-      -webkit-flex: 8;
-      flex: 8;
-    };
-
-    --layout-flex-9: {
-      -ms-flex: 9;
-      -webkit-flex: 9;
-      flex: 9;
-    };
-
-    --layout-flex-10: {
-      -ms-flex: 10;
-      -webkit-flex: 10;
-      flex: 10;
-    };
-
-    --layout-flex-11: {
-      -ms-flex: 11;
-      -webkit-flex: 11;
-      flex: 11;
-    };
-
-    --layout-flex-12: {
-      -ms-flex: 12;
-      -webkit-flex: 12;
-      flex: 12;
-    };
-
-    /* alignment in cross axis */
-
-    --layout-start: {
-      -ms-flex-align: start;
-      -webkit-align-items: flex-start;
-      align-items: flex-start;
-    };
-
-    --layout-center: {
-      -ms-flex-align: center;
-      -webkit-align-items: center;
-      align-items: center;
-    };
-
-    --layout-end: {
-      -ms-flex-align: end;
-      -webkit-align-items: flex-end;
-      align-items: flex-end;
-    };
-
-    --layout-baseline: {
-      -ms-flex-align: baseline;
-      -webkit-align-items: baseline;
-      align-items: baseline;
-    };
-
-    /* alignment in main axis */
-
-    --layout-start-justified: {
-      -ms-flex-pack: start;
-      -webkit-justify-content: flex-start;
-      justify-content: flex-start;
-    };
-
-    --layout-center-justified: {
-      -ms-flex-pack: center;
-      -webkit-justify-content: center;
-      justify-content: center;
-    };
-
-    --layout-end-justified: {
-      -ms-flex-pack: end;
-      -webkit-justify-content: flex-end;
-      justify-content: flex-end;
-    };
-
-    --layout-around-justified: {
-      -ms-flex-pack: distribute;
-      -webkit-justify-content: space-around;
-      justify-content: space-around;
-    };
-
-    --layout-justified: {
-      -ms-flex-pack: justify;
-      -webkit-justify-content: space-between;
-      justify-content: space-between;
-    };
-
-    --layout-center-center: {
-      @apply --layout-center;
-      @apply --layout-center-justified;
-    };
-
-    /* self alignment */
-
-    --layout-self-start: {
-      -ms-align-self: flex-start;
-      -webkit-align-self: flex-start;
-      align-self: flex-start;
-    };
-
-    --layout-self-center: {
-      -ms-align-self: center;
-      -webkit-align-self: center;
-      align-self: center;
-    };
-
-    --layout-self-end: {
-      -ms-align-self: flex-end;
-      -webkit-align-self: flex-end;
-      align-self: flex-end;
-    };
-
-    --layout-self-stretch: {
-      -ms-align-self: stretch;
-      -webkit-align-self: stretch;
-      align-self: stretch;
-    };
-
-    --layout-self-baseline: {
-      -ms-align-self: baseline;
-      -webkit-align-self: baseline;
-      align-self: baseline;
-    };
-
-    /* multi-line alignment in main axis */
-
-    --layout-start-aligned: {
-      -ms-flex-line-pack: start;  /* IE10 */
-      -ms-align-content: flex-start;
-      -webkit-align-content: flex-start;
-      align-content: flex-start;
-    };
-
-    --layout-end-aligned: {
-      -ms-flex-line-pack: end;  /* IE10 */
-      -ms-align-content: flex-end;
-      -webkit-align-content: flex-end;
-      align-content: flex-end;
-    };
-
-    --layout-center-aligned: {
-      -ms-flex-line-pack: center;  /* IE10 */
-      -ms-align-content: center;
-      -webkit-align-content: center;
-      align-content: center;
-    };
-
-    --layout-between-aligned: {
-      -ms-flex-line-pack: justify;  /* IE10 */
-      -ms-align-content: space-between;
-      -webkit-align-content: space-between;
-      align-content: space-between;
-    };
-
-    --layout-around-aligned: {
-      -ms-flex-line-pack: distribute;  /* IE10 */
-      -ms-align-content: space-around;
-      -webkit-align-content: space-around;
-      align-content: space-around;
-    };
-
-    /*******************************
-              Other Layout
-    *******************************/
-
-    --layout-block: {
-      display: block;
-    };
-
-    --layout-invisible: {
-      visibility: hidden !important;
-    };
-
-    --layout-relative: {
-      position: relative;
-    };
-
-    --layout-fit: {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-scroll: {
-      -webkit-overflow-scrolling: touch;
-      overflow: auto;
-    };
-
-    --layout-fullbleed: {
-      margin: 0;
-      height: 100vh;
-    };
-
-    /* fixed position */
-
-    --layout-fixed-top: {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-    };
-
-    --layout-fixed-right: {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    };
-
-    --layout-fixed-bottom: {
-      position: fixed;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-fixed-left: {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-  }
-
-  html {
-
-    --layout: {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-    };
-
-    --layout-inline: {
-      display: -ms-inline-flexbox;
-      display: -webkit-inline-flex;
-      display: inline-flex;
-    };
-
-    --layout-horizontal: {
-      @apply --layout;
-
-      -ms-flex-direction: row;
-      -webkit-flex-direction: row;
-      flex-direction: row;
-    };
-
-    --layout-horizontal-reverse: {
-      @apply --layout;
-
-      -ms-flex-direction: row-reverse;
-      -webkit-flex-direction: row-reverse;
-      flex-direction: row-reverse;
-    };
-
-    --layout-vertical: {
-      @apply --layout;
-
-      -ms-flex-direction: column;
-      -webkit-flex-direction: column;
-      flex-direction: column;
-    };
-
-    --layout-vertical-reverse: {
-      @apply --layout;
-
-      -ms-flex-direction: column-reverse;
-      -webkit-flex-direction: column-reverse;
-      flex-direction: column-reverse;
-    };
-
-    --layout-wrap: {
-      -ms-flex-wrap: wrap;
-      -webkit-flex-wrap: wrap;
-      flex-wrap: wrap;
-    };
-
-    --layout-wrap-reverse: {
-      -ms-flex-wrap: wrap-reverse;
-      -webkit-flex-wrap: wrap-reverse;
-      flex-wrap: wrap-reverse;
-    };
-
-    --layout-flex-auto: {
-      -ms-flex: 1 1 auto;
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-    };
-
-    --layout-flex-none: {
-      -ms-flex: none;
-      -webkit-flex: none;
-      flex: none;
-    };
-
-    --layout-flex: {
-      -ms-flex: 1 1 0.000000001px;
-      -webkit-flex: 1;
-      flex: 1;
-      -webkit-flex-basis: 0.000000001px;
-      flex-basis: 0.000000001px;
-    };
-
-    --layout-flex-2: {
-      -ms-flex: 2;
-      -webkit-flex: 2;
-      flex: 2;
-    };
-
-    --layout-flex-3: {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    };
-
-    --layout-flex-4: {
-      -ms-flex: 4;
-      -webkit-flex: 4;
-      flex: 4;
-    };
-
-    --layout-flex-5: {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    };
-
-    --layout-flex-6: {
-      -ms-flex: 6;
-      -webkit-flex: 6;
-      flex: 6;
-    };
-
-    --layout-flex-7: {
-      -ms-flex: 7;
-      -webkit-flex: 7;
-      flex: 7;
-    };
-
-    --layout-flex-8: {
-      -ms-flex: 8;
-      -webkit-flex: 8;
-      flex: 8;
-    };
-
-    --layout-flex-9: {
-      -ms-flex: 9;
-      -webkit-flex: 9;
-      flex: 9;
-    };
-
-    --layout-flex-10: {
-      -ms-flex: 10;
-      -webkit-flex: 10;
-      flex: 10;
-    };
-
-    --layout-flex-11: {
-      -ms-flex: 11;
-      -webkit-flex: 11;
-      flex: 11;
-    };
-
-    --layout-flex-12: {
-      -ms-flex: 12;
-      -webkit-flex: 12;
-      flex: 12;
-    };
-
-    /* alignment in cross axis */
-
-    --layout-start: {
-      -ms-flex-align: start;
-      -webkit-align-items: flex-start;
-      align-items: flex-start;
-    };
-
-    --layout-center: {
-      -ms-flex-align: center;
-      -webkit-align-items: center;
-      align-items: center;
-    };
-
-    --layout-end: {
-      -ms-flex-align: end;
-      -webkit-align-items: flex-end;
-      align-items: flex-end;
-    };
-
-    --layout-baseline: {
-      -ms-flex-align: baseline;
-      -webkit-align-items: baseline;
-      align-items: baseline;
-    };
-
-    /* alignment in main axis */
-
-    --layout-start-justified: {
-      -ms-flex-pack: start;
-      -webkit-justify-content: flex-start;
-      justify-content: flex-start;
-    };
-
-    --layout-center-justified: {
-      -ms-flex-pack: center;
-      -webkit-justify-content: center;
-      justify-content: center;
-    };
-
-    --layout-end-justified: {
-      -ms-flex-pack: end;
-      -webkit-justify-content: flex-end;
-      justify-content: flex-end;
-    };
-
-    --layout-around-justified: {
-      -ms-flex-pack: distribute;
-      -webkit-justify-content: space-around;
-      justify-content: space-around;
-    };
-
-    --layout-justified: {
-      -ms-flex-pack: justify;
-      -webkit-justify-content: space-between;
-      justify-content: space-between;
-    };
-
-    --layout-center-center: {
-      @apply --layout-center;
-      @apply --layout-center-justified;
-    };
-
-    /* self alignment */
-
-    --layout-self-start: {
-      -ms-align-self: flex-start;
-      -webkit-align-self: flex-start;
-      align-self: flex-start;
-    };
-
-    --layout-self-center: {
-      -ms-align-self: center;
-      -webkit-align-self: center;
-      align-self: center;
-    };
-
-    --layout-self-end: {
-      -ms-align-self: flex-end;
-      -webkit-align-self: flex-end;
-      align-self: flex-end;
-    };
-
-    --layout-self-stretch: {
-      -ms-align-self: stretch;
-      -webkit-align-self: stretch;
-      align-self: stretch;
-    };
-
-    --layout-self-baseline: {
-      -ms-align-self: baseline;
-      -webkit-align-self: baseline;
-      align-self: baseline;
-    };
-
-    /* multi-line alignment in main axis */
-
-    --layout-start-aligned: {
-      -ms-flex-line-pack: start;  /* IE10 */
-      -ms-align-content: flex-start;
-      -webkit-align-content: flex-start;
-      align-content: flex-start;
-    };
-
-    --layout-end-aligned: {
-      -ms-flex-line-pack: end;  /* IE10 */
-      -ms-align-content: flex-end;
-      -webkit-align-content: flex-end;
-      align-content: flex-end;
-    };
-
-    --layout-center-aligned: {
-      -ms-flex-line-pack: center;  /* IE10 */
-      -ms-align-content: center;
-      -webkit-align-content: center;
-      align-content: center;
-    };
-
-    --layout-between-aligned: {
-      -ms-flex-line-pack: justify;  /* IE10 */
-      -ms-align-content: space-between;
-      -webkit-align-content: space-between;
-      align-content: space-between;
-    };
-
-    --layout-around-aligned: {
-      -ms-flex-line-pack: distribute;  /* IE10 */
-      -ms-align-content: space-around;
-      -webkit-align-content: space-around;
-      align-content: space-around;
-    };
-
-    /*******************************
-              Other Layout
-    *******************************/
-
-    --layout-block: {
-      display: block;
-    };
-
-    --layout-invisible: {
-      visibility: hidden !important;
-    };
-
-    --layout-relative: {
-      position: relative;
-    };
-
-    --layout-fit: {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-scroll: {
-      -webkit-overflow-scrolling: touch;
-      overflow: auto;
-    };
-
-    --layout-fullbleed: {
-      margin: 0;
-      height: 100vh;
-    };
-
-    /* fixed position */
-
-    --layout-fixed-top: {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-    };
-
-    --layout-fixed-right: {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    };
-
-    --layout-fixed-bottom: {
-      position: fixed;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-fixed-left: {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-  }
-</style></custom-style>
+<custom-style>
+  <style is="custom-style">
+    html {
+
+      --layout: {
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+      };
+
+      --layout-inline: {
+        display: -ms-inline-flexbox;
+        display: -webkit-inline-flex;
+        display: inline-flex;
+      };
+
+      --layout-horizontal: {
+        @apply --layout;
+
+        -ms-flex-direction: row;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+      };
+
+      --layout-horizontal-reverse: {
+        @apply --layout;
+
+        -ms-flex-direction: row-reverse;
+        -webkit-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+      };
+
+      --layout-vertical: {
+        @apply --layout;
+
+        -ms-flex-direction: column;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+      };
+
+      --layout-vertical-reverse: {
+        @apply --layout;
+
+        -ms-flex-direction: column-reverse;
+        -webkit-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+      };
+
+      --layout-wrap: {
+        -ms-flex-wrap: wrap;
+        -webkit-flex-wrap: wrap;
+        flex-wrap: wrap;
+      };
+
+      --layout-wrap-reverse: {
+        -ms-flex-wrap: wrap-reverse;
+        -webkit-flex-wrap: wrap-reverse;
+        flex-wrap: wrap-reverse;
+      };
+
+      --layout-flex-auto: {
+        -ms-flex: 1 1 auto;
+        -webkit-flex: 1 1 auto;
+        flex: 1 1 auto;
+      };
+
+      --layout-flex-none: {
+        -ms-flex: none;
+        -webkit-flex: none;
+        flex: none;
+      };
+
+      --layout-flex: {
+        -ms-flex: 1 1 0.000000001px;
+        -webkit-flex: 1;
+        flex: 1;
+        -webkit-flex-basis: 0.000000001px;
+        flex-basis: 0.000000001px;
+      };
+
+      --layout-flex-2: {
+        -ms-flex: 2;
+        -webkit-flex: 2;
+        flex: 2;
+      };
+
+      --layout-flex-3: {
+        -ms-flex: 3;
+        -webkit-flex: 3;
+        flex: 3;
+      };
+
+      --layout-flex-4: {
+        -ms-flex: 4;
+        -webkit-flex: 4;
+        flex: 4;
+      };
+
+      --layout-flex-5: {
+        -ms-flex: 5;
+        -webkit-flex: 5;
+        flex: 5;
+      };
+
+      --layout-flex-6: {
+        -ms-flex: 6;
+        -webkit-flex: 6;
+        flex: 6;
+      };
+
+      --layout-flex-7: {
+        -ms-flex: 7;
+        -webkit-flex: 7;
+        flex: 7;
+      };
+
+      --layout-flex-8: {
+        -ms-flex: 8;
+        -webkit-flex: 8;
+        flex: 8;
+      };
+
+      --layout-flex-9: {
+        -ms-flex: 9;
+        -webkit-flex: 9;
+        flex: 9;
+      };
+
+      --layout-flex-10: {
+        -ms-flex: 10;
+        -webkit-flex: 10;
+        flex: 10;
+      };
+
+      --layout-flex-11: {
+        -ms-flex: 11;
+        -webkit-flex: 11;
+        flex: 11;
+      };
+
+      --layout-flex-12: {
+        -ms-flex: 12;
+        -webkit-flex: 12;
+        flex: 12;
+      };
+
+      /* alignment in cross axis */
+
+      --layout-start: {
+        -ms-flex-align: start;
+        -webkit-align-items: flex-start;
+        align-items: flex-start;
+      };
+
+      --layout-center: {
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+      };
+
+      --layout-end: {
+        -ms-flex-align: end;
+        -webkit-align-items: flex-end;
+        align-items: flex-end;
+      };
+
+      --layout-baseline: {
+        -ms-flex-align: baseline;
+        -webkit-align-items: baseline;
+        align-items: baseline;
+      };
+
+      /* alignment in main axis */
+
+      --layout-start-justified: {
+        -ms-flex-pack: start;
+        -webkit-justify-content: flex-start;
+        justify-content: flex-start;
+      };
+
+      --layout-center-justified: {
+        -ms-flex-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+      };
+
+      --layout-end-justified: {
+        -ms-flex-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+      };
+
+      --layout-around-justified: {
+        -ms-flex-pack: distribute;
+        -webkit-justify-content: space-around;
+        justify-content: space-around;
+      };
+
+      --layout-justified: {
+        -ms-flex-pack: justify;
+        -webkit-justify-content: space-between;
+        justify-content: space-between;
+      };
+
+      --layout-center-center: {
+        @apply --layout-center;
+        @apply --layout-center-justified;
+      };
+
+      /* self alignment */
+
+      --layout-self-start: {
+        -ms-align-self: flex-start;
+        -webkit-align-self: flex-start;
+        align-self: flex-start;
+      };
+
+      --layout-self-center: {
+        -ms-align-self: center;
+        -webkit-align-self: center;
+        align-self: center;
+      };
+
+      --layout-self-end: {
+        -ms-align-self: flex-end;
+        -webkit-align-self: flex-end;
+        align-self: flex-end;
+      };
+
+      --layout-self-stretch: {
+        -ms-align-self: stretch;
+        -webkit-align-self: stretch;
+        align-self: stretch;
+      };
+
+      --layout-self-baseline: {
+        -ms-align-self: baseline;
+        -webkit-align-self: baseline;
+        align-self: baseline;
+      };
+
+      /* multi-line alignment in main axis */
+
+      --layout-start-aligned: {
+        -ms-flex-line-pack: start;  /* IE10 */
+        -ms-align-content: flex-start;
+        -webkit-align-content: flex-start;
+        align-content: flex-start;
+      };
+
+      --layout-end-aligned: {
+        -ms-flex-line-pack: end;  /* IE10 */
+        -ms-align-content: flex-end;
+        -webkit-align-content: flex-end;
+        align-content: flex-end;
+      };
+
+      --layout-center-aligned: {
+        -ms-flex-line-pack: center;  /* IE10 */
+        -ms-align-content: center;
+        -webkit-align-content: center;
+        align-content: center;
+      };
+
+      --layout-between-aligned: {
+        -ms-flex-line-pack: justify;  /* IE10 */
+        -ms-align-content: space-between;
+        -webkit-align-content: space-between;
+        align-content: space-between;
+      };
+
+      --layout-around-aligned: {
+        -ms-flex-line-pack: distribute;  /* IE10 */
+        -ms-align-content: space-around;
+        -webkit-align-content: space-around;
+        align-content: space-around;
+      };
+
+      /*******************************
+                Other Layout
+      *******************************/
+
+      --layout-block: {
+        display: block;
+      };
+
+      --layout-invisible: {
+        visibility: hidden !important;
+      };
+
+      --layout-relative: {
+        position: relative;
+      };
+
+      --layout-fit: {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      };
+
+      --layout-scroll: {
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+      };
+
+      --layout-fullbleed: {
+        margin: 0;
+        height: 100vh;
+      };
+
+      /* fixed position */
+
+      --layout-fixed-top: {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+      };
+
+      --layout-fixed-right: {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      };
+
+      --layout-fixed-bottom: {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      };
+
+      --layout-fixed-left: {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+      };
+
+    }
+  </style>
+</custom-style>
diff --git a/test/iron-flex-layout-classes.html b/test/iron-flex-layout-classes.html
index 502ebfa..d81db2f 100644
--- a/test/iron-flex-layout-classes.html
+++ b/test/iron-flex-layout-classes.html
@@ -20,41 +20,43 @@
     <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="../iron-flex-layout-classes.html">
 
-    <custom-style><style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      .container {
-        width: 300px;
-        min-height: 50px;
-        background-color: #ccc;
-      }
-      .container > div {
-        width: 50px;
-        min-height: 50px; /* so that it can grow in vertical layouts. */
-      }
-      /* IE11 does not calculate flex proportions correctly in a vertical
-       * layout if the children just have a min-height. For those tests,
-       * use a fixed height instead. */
-      .container > div.fixed-height {
-        min-height: 0;
-        height: 50px;
-      }
-      .container.relative > div {
-        min-width: 50px;
-        min-height: 50px;
-        width: inherit;
-      }
-      .container.small { width: 120px; }
-      .container.tall { height: 300px; }
-
-      #c1 { background-color: #E91E63; }
-      #c2 { background-color: #03A9F4; }
-      #c3 { background-color: #CDDC39; }
-      #c4 { background-color: #03A9F4; }
-      #c5 { background-color: #E91E63; }
-    </style></custom-style>
+    <custom-style>
+      <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        .container {
+          width: 300px;
+          min-height: 50px;
+          background-color: #ccc;
+        }
+        .container > div {
+          width: 50px;
+          min-height: 50px; /* so that it can grow in vertical layouts. */
+        }
+        /* IE11 does not calculate flex proportions correctly in a vertical
+         * layout if the children just have a min-height. For those tests,
+         * use a fixed height instead. */
+        .container > div.fixed-height {
+          min-height: 0;
+          height: 50px;
+        }
+        .container.relative > div {
+          min-width: 50px;
+          min-height: 50px;
+          width: inherit;
+        }
+        .container.small { width: 120px; }
+        .container.tall { height: 300px; }
+
+        #c1 { background-color: #E91E63; }
+        #c2 { background-color: #03A9F4; }
+        #c3 { background-color: #CDDC39; }
+        #c4 { background-color: #03A9F4; }
+        #c5 { background-color: #E91E63; }
+      </style>
+    </custom-style>
   </head>
   <body>
     <test-fixture id="basic">
diff --git a/test/iron-flex-layout.html b/test/iron-flex-layout.html
index 6c70add..6be8927 100644
--- a/test/iron-flex-layout.html
+++ b/test/iron-flex-layout.html
@@ -20,67 +20,68 @@
     <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="../iron-flex-layout.html">
 
-    <custom-style><style is="custom-style">
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      .container {
-        width: 300px;
-        min-height: 50px;
-        background-color: #ccc;
-      }
-      .container > div {
-        width: 50px;
-        min-height: 50px; /* so that it can grow in vertical layouts. */
-      }
-      /* IE11 does not calculate flex proportions correctly in a vertical
-       * layout if the children just have a min-height. For those tests,
-       * use a fixed height instead. */
-      .container > div.fixed-height {
-        min-height: 0;
-        height: 50px;
-      }
-      .relative { @apply --layout-relative; }
-      .container.relative > div {
-        min-width: 50px;
-        min-height: 50px;
-        width: inherit;
-      }
-      .container.small { width: 120px; }
-      .container.tall { height: 300px; }
-
-      #c1 { background-color: #E91E63; }
-      #c2 { background-color: #03A9F4; }
-      #c3 { background-color: #CDDC39; }
-      #c4 { background-color: #03A9F4; }
-      #c5 { background-color: #E91E63; }
-
-      .horizontal { @apply --layout-horizontal; }
-      .horizontal-reverse { @apply --layout-horizontal-reverse; }
-      .vertical { @apply --layout-vertical; }
-      .vertical-reverse { @apply --layout-vertical-reverse; }
-      .wrap { @apply --layout-wrap; }
-      .wrap-reverse { @apply --layout-wrap-reverse; }
-      .flex { @apply --layout-flex; }
-      .flex2 { @apply --layout-flex-2; }
-      .flex3 { @apply --layout-flex-3; }
-      .center { @apply --layout-center; }
-      .start { @apply --layout-start; }
-      .end { @apply --layout-end; }
-      .start-justified { @apply --layout-start-justified; }
-      .center-justified { @apply --layout-center-justified; }
-      .end-justified { @apply --layout-end-justified; }
-      .justified { @apply --layout-justified; }
-      .around-justified { @apply --layout-around-justified; }
-      .fit { @apply --layout-fit; }
-      .start-aligned { @apply --layout-start-aligned; }
-      .end-aligned { @apply --layout-end-aligned; }
-      .center-aligned { @apply --layout-center-aligned; }
-      .between-aligned { @apply --layout-between-aligned; }
-      .around-aligned { @apply --layout-around-aligned; }
-
-    </style></custom-style>
+    <custom-style>
+      <style is="custom-style">
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        .container {
+          width: 300px;
+          min-height: 50px;
+          background-color: #ccc;
+        }
+        .container > div {
+          width: 50px;
+          min-height: 50px; /* so that it can grow in vertical layouts. */
+        }
+        /* IE11 does not calculate flex proportions correctly in a vertical
+         * layout if the children just have a min-height. For those tests,
+         * use a fixed height instead. */
+        .container > div.fixed-height {
+          min-height: 0;
+          height: 50px;
+        }
+        .relative { @apply --layout-relative; }
+        .container.relative > div {
+          min-width: 50px;
+          min-height: 50px;
+          width: inherit;
+        }
+        .container.small { width: 120px; }
+        .container.tall { height: 300px; }
+
+        #c1 { background-color: #E91E63; }
+        #c2 { background-color: #03A9F4; }
+        #c3 { background-color: #CDDC39; }
+        #c4 { background-color: #03A9F4; }
+        #c5 { background-color: #E91E63; }
+
+        .horizontal { @apply --layout-horizontal; }
+        .horizontal-reverse { @apply --layout-horizontal-reverse; }
+        .vertical { @apply --layout-vertical; }
+        .vertical-reverse { @apply --layout-vertical-reverse; }
+        .wrap { @apply --layout-wrap; }
+        .wrap-reverse { @apply --layout-wrap-reverse; }
+        .flex { @apply --layout-flex; }
+        .flex2 { @apply --layout-flex-2; }
+        .flex3 { @apply --layout-flex-3; }
+        .center { @apply --layout-center; }
+        .start { @apply --layout-start; }
+        .end { @apply --layout-end; }
+        .start-justified { @apply --layout-start-justified; }
+        .center-justified { @apply --layout-center-justified; }
+        .end-justified { @apply --layout-end-justified; }
+        .justified { @apply --layout-justified; }
+        .around-justified { @apply --layout-around-justified; }
+        .fit { @apply --layout-fit; }
+        .start-aligned { @apply --layout-start-aligned; }
+        .end-aligned { @apply --layout-end-aligned; }
+        .center-aligned { @apply --layout-center-aligned; }
+        .between-aligned { @apply --layout-between-aligned; }
+        .around-aligned { @apply --layout-around-aligned; }
+      </style>
+    </custom-style>
   </head>
   <body>
     <test-fixture id="basic">

From 641751dd3e65bb7de69ad457ed0cacbf88ddd5d9 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Tue, 29 Nov 2016 16:23:47 -0800
Subject: [PATCH 06/19] add shady 2.0 test config

---
 test/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/index.html b/test/index.html
index 90e12a7..39e56bc 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,9 +21,9 @@
   <body>
     <script>
       WCT.loadSuites([
-        'iron-flex-layout.html',
+        'iron-flex-layout.html?wc-shadydom=true&wc-register=true',
         'iron-flex-layout.html?dom=shadow',
-        'iron-flex-layout-classes.html',
+        'iron-flex-layout-classes.html?wc-shadydom=true&wc-register=true',
         'iron-flex-layout-classes.html?dom=shadow'
       ]);
     </script>

From cd9e70abca376d9ea148f1c9b697e6e891a06031 Mon Sep 17 00:00:00 2001
From: Polymer Format Bot <format-bot@polymer-project.org>
Date: Wed, 11 Jan 2017 21:01:14 -0800
Subject: [PATCH 07/19] Depend on test-fixture v2

---
 bower.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index 37a9404..b0184fe 100644
--- a/bower.json
+++ b/bower.json
@@ -21,13 +21,13 @@
     "polymer": "polymer/polymer#2.0-preview"
   },
   "devDependencies": {
-    "test-fixture": "PolymerElements/test-fixture#custom-elements-v1",
+    "test-fixture": "PolymerElements/test-fixture#^2.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#v1",
     "web-component-tester": "^4.0.0",
     "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
   },
   "ignore": [],
   "resolutions": {
-    "test-fixture": "custom-elements-v1"
+    "test-fixture": "^2.0.0"
   }
 }

From 45382d20ee904ff6d562277bbfb28ae1373bc442 Mon Sep 17 00:00:00 2001
From: Tedium Bot <format-bot@polymer-project.org>
Date: Wed, 25 Jan 2017 12:40:49 -0800
Subject: [PATCH 08/19] auto-generated: update repo for v2

---
 .travis.yml | 17 ++++++++---------
 bower.json  | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index e1b91a2..e8f3276 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,23 +1,22 @@
 language: node_js
 sudo: required
 before_script:
-- npm install -g bower polylint web-component-tester
-- bower install
-- polylint
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
 env:
   global:
-  - secure: idlCNYtNQ7rLGCSl2NuZ++XZEwofpojkakXhL8m34pCX1ZwhGRprHsvNE7h7tz8SIV+mUjuUT8DaM7rlgZ+bLyw/Hq7G15DdmU5puUsCVibFFBBEhh82lxkdK/Rlfo+ytt0MFsbTJljEoqTSbnL0fSeC0cN/7wf6yEQs/+mTR0I=
-  - secure: i/rAHa9rxszmbE+RbQ2b7ln6OYzrcoUssdPk36lNeJk/B1HjBS9cfg1PMwSAw+t6yvAN3I0fbOOl4dlGB1K5T4kAtmcAcC3fbptJL08IvK9K15pz/rMEzIBWLXj9oVJliwBZR2GFH+5zv6aFdEwQxh1leBnHQwmKgl24QX8XGO4=
+    - secure: idlCNYtNQ7rLGCSl2NuZ++XZEwofpojkakXhL8m34pCX1ZwhGRprHsvNE7h7tz8SIV+mUjuUT8DaM7rlgZ+bLyw/Hq7G15DdmU5puUsCVibFFBBEhh82lxkdK/Rlfo+ytt0MFsbTJljEoqTSbnL0fSeC0cN/7wf6yEQs/+mTR0I=
+    - secure: i/rAHa9rxszmbE+RbQ2b7ln6OYzrcoUssdPk36lNeJk/B1HjBS9cfg1PMwSAw+t6yvAN3I0fbOOl4dlGB1K5T4kAtmcAcC3fbptJL08IvK9K15pz/rMEzIBWLXj9oVJliwBZR2GFH+5zv6aFdEwQxh1leBnHQwmKgl24QX8XGO4=
 node_js: stable
 addons:
   firefox: '46.0'
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
+      - google-chrome-stable
   sauce_connect: true
 script:
-- xvfb-run wct
-- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
+  - xvfb-run polymer test
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s ''default''; fi'
 dist: trusty
diff --git a/bower.json b/bower.json
index b0184fe..cb124e8 100644
--- a/bower.json
+++ b/bower.json
@@ -23,11 +23,23 @@
   "devDependencies": {
     "test-fixture": "PolymerElements/test-fixture#^2.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#v1",
-    "web-component-tester": "^4.0.0",
+    "web-component-tester": "v6.0.0-prerelease.5",
     "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
   },
   "ignore": [],
   "resolutions": {
     "test-fixture": "^2.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.1.0"
+      },
+      "devDependencies": {
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0"
+      }
+    }
   }
 }

From 1a160df4e1d074eb20b6bad9ff77f00ede87cb6b Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Tue, 28 Feb 2017 12:36:59 -0800
Subject: [PATCH 09/19] update deps

---
 bower.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/bower.json b/bower.json
index cb124e8..086e1d5 100644
--- a/bower.json
+++ b/bower.json
@@ -21,9 +21,9 @@
     "polymer": "polymer/polymer#2.0-preview"
   },
   "devDependencies": {
-    "test-fixture": "PolymerElements/test-fixture#^2.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#v1",
-    "web-component-tester": "v6.0.0-prerelease.5",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
     "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
   },
   "ignore": [],
@@ -38,6 +38,7 @@
       "devDependencies": {
         "test-fixture": "PolymerElements/test-fixture#^1.0.0",
         "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0",
         "iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0"
       }
     }

From ec9a1f91d95821427cccd83ef141137688b7ecdb Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Tue, 7 Mar 2017 11:16:34 -0800
Subject: [PATCH 10/19] Update Polymer to `^2.0.0-rc.1`.

---
 bower.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/bower.json b/bower.json
index 086e1d5..8f1365c 100644
--- a/bower.json
+++ b/bower.json
@@ -18,7 +18,7 @@
     "url": "git://github.com/PolymerElements/iron-flex-layout.git"
   },
   "dependencies": {
-    "polymer": "polymer/polymer#2.0-preview"
+    "polymer": "polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
     "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
@@ -27,9 +27,6 @@
     "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
   },
   "ignore": [],
-  "resolutions": {
-    "test-fixture": "^2.0.0"
-  },
   "variants": {
     "1.x": {
       "dependencies": {

From ba140346328d8c62add2d11ae3ce6ada27167e81 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Wed, 5 Apr 2017 13:11:14 -0700
Subject: [PATCH 11/19] review comments

---
 .gitignore                    |  4 ++--
 bower.json                    |  2 ++
 demo/index.html               |  5 -----
 iron-flex-layout-classes.html | 10 ++++++++++
 test/index.html               |  4 ++--
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1eb1fa5..2be39e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-bower_components
-
+bower_components*
+bower-*.json
diff --git a/bower.json b/bower.json
index 8f1365c..766727b 100644
--- a/bower.json
+++ b/bower.json
@@ -24,6 +24,7 @@
     "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
     "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
+    "iron-component-page": "polymerelements/iron-component-page#2.0-preview",
     "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
   },
   "ignore": [],
@@ -36,6 +37,7 @@
         "test-fixture": "PolymerElements/test-fixture#^1.0.0",
         "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
         "web-component-tester": "Polymer/web-component-tester#^4.0.0",
+        "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
         "iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0"
       }
     }
diff --git a/demo/index.html b/demo/index.html
index e9d0315..887ff3f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -42,11 +42,6 @@
         background-color: white;
         min-height: 20px;
       }
-
-      .main-container {
-        max-width: 600px;
-        margin: 0 auto;
-      }
     </style>
   </custom-style>
 
diff --git a/iron-flex-layout-classes.html b/iron-flex-layout-classes.html
index becd34c..a4e84c1 100644
--- a/iron-flex-layout-classes.html
+++ b/iron-flex-layout-classes.html
@@ -66,6 +66,12 @@
         flex-wrap: wrap;
       }
 
+      .layout.no-wrap {
+        -ms-flex-wrap: nowrap;
+        -webkit-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+      }
+
       .layout.center,
       .layout.center-center {
         -ms-flex-align: center;
@@ -364,6 +370,10 @@
         display: block;
       }
 
+      [hidden] {
+        display: none !important;
+      }
+
       .invisible {
         visibility: hidden !important;
       }
diff --git a/test/index.html b/test/index.html
index 39e56bc..78d32da 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,9 +21,9 @@
   <body>
     <script>
       WCT.loadSuites([
-        'iron-flex-layout.html?wc-shadydom=true&wc-register=true',
+        'iron-flex-layout.html?wc-shadydom=true&wc-ce=true',
         'iron-flex-layout.html?dom=shadow',
-        'iron-flex-layout-classes.html?wc-shadydom=true&wc-register=true',
+        'iron-flex-layout-classes.html?wc-shadydom=true&wc-ce=true',
         'iron-flex-layout-classes.html?dom=shadow'
       ]);
     </script>

From b278e029d72247c340061b3f8573e3ce01e7689f Mon Sep 17 00:00:00 2001
From: Polymer Format Bot <format-bot@polymer-project.org>
Date: Thu, 6 Apr 2017 17:32:09 -0700
Subject: [PATCH 12/19] Update travis config

---
 .travis.yml | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 31f826e..00575a6 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,10 +3,14 @@ sudo: required
 before_script:
   - npm install -g bower polymer-cli@next
   - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
 env:
   global:
-    - secure: idlCNYtNQ7rLGCSl2NuZ++XZEwofpojkakXhL8m34pCX1ZwhGRprHsvNE7h7tz8SIV+mUjuUT8DaM7rlgZ+bLyw/Hq7G15DdmU5puUsCVibFFBBEhh82lxkdK/Rlfo+ytt0MFsbTJljEoqTSbnL0fSeC0cN/7wf6yEQs/+mTR0I=
-    - secure: i/rAHa9rxszmbE+RbQ2b7ln6OYzrcoUssdPk36lNeJk/B1HjBS9cfg1PMwSAw+t6yvAN3I0fbOOl4dlGB1K5T4kAtmcAcC3fbptJL08IvK9K15pz/rMEzIBWLXj9oVJliwBZR2GFH+5zv6aFdEwQxh1leBnHQwmKgl24QX8XGO4=
+    - secure: >-
+        idlCNYtNQ7rLGCSl2NuZ++XZEwofpojkakXhL8m34pCX1ZwhGRprHsvNE7h7tz8SIV+mUjuUT8DaM7rlgZ+bLyw/Hq7G15DdmU5puUsCVibFFBBEhh82lxkdK/Rlfo+ytt0MFsbTJljEoqTSbnL0fSeC0cN/7wf6yEQs/+mTR0I=
+    - secure: >-
+        i/rAHa9rxszmbE+RbQ2b7ln6OYzrcoUssdPk36lNeJk/B1HjBS9cfg1PMwSAw+t6yvAN3I0fbOOl4dlGB1K5T4kAtmcAcC3fbptJL08IvK9K15pz/rMEzIBWLXj9oVJliwBZR2GFH+5zv6aFdEwQxh1leBnHQwmKgl24QX8XGO4=
 node_js: stable
 addons:
   firefox: latest
@@ -14,9 +18,11 @@ addons:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
   sauce_connect: true
 script:
   - xvfb-run polymer test
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s ''default''; fi'
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty

From 01b30ec5c4d73acdaea6a2f336e5b66ebd04430f Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Thu, 13 Apr 2017 14:39:15 -0700
Subject: [PATCH 13/19] fix bad rebase

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 0781597..3394e1b 100644
--- a/bower.json
+++ b/bower.json
@@ -41,7 +41,7 @@
         "iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0"
       }
     }
-  }
+  },
   "pages": {
     "Flexbox layout guide": "GUIDE.md"
   },

From bbf6198be548670873dd7c4c8c327fd278414fe7 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Thu, 13 Apr 2017 15:32:18 -0700
Subject: [PATCH 14/19] fix tests

---
 test/iron-flex-layout-classes.html | 8 ++++++++
 test/iron-flex-layout.html         | 9 +++++++++
 2 files changed, 17 insertions(+)

diff --git a/test/iron-flex-layout-classes.html b/test/iron-flex-layout-classes.html
index d81db2f..525718e 100644
--- a/test/iron-flex-layout-classes.html
+++ b/test/iron-flex-layout-classes.html
@@ -113,6 +113,14 @@
                rect.left === left && rect.right === right;
       }
       suite('basic layout', function() {
+        suiteSetup(function() {
+          // In Polymer 2.0, custom-style is lazy, and won't boot until a
+          // Polymer element is used (and these tests don't have a Polymer element).
+          if (Polymer.Element) {
+            window.ShadyCSS.styleDocument();
+          }
+        });
+        
         var container;
 
         setup(function() {
diff --git a/test/iron-flex-layout.html b/test/iron-flex-layout.html
index 6be8927..f297730 100644
--- a/test/iron-flex-layout.html
+++ b/test/iron-flex-layout.html
@@ -137,7 +137,16 @@
         return rect.top === top && rect.bottom === bottom &&
                rect.left === left && rect.right === right;
       }
+
       suite('basic layout', function() {
+        suiteSetup(function() {
+          // In Polymer 2.0, custom-style is lazy, and won't boot until a
+          // Polymer element is used (and these tests don't have a Polymer element).
+          if (Polymer.Element) {
+            window.ShadyCSS.styleDocument();
+          }
+        });
+
         var container;
 
         setup(function() {

From c684c8de18a0f64a0f38841e0f3ba3b93c58ce10 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <notwaldorf@gmail.com>
Date: Mon, 17 Apr 2017 16:24:43 -0700
Subject: [PATCH 15/19] Update README.md

---
 README.md | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index db013a2..32ba986 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 [![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/iron-flex-layout)
 
-##&lt;iron-flex-layout&gt;
+## &lt;iron-flex-layout&gt;
 
 The `<iron-flex-layout>` component provides simple ways to use
 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
@@ -16,7 +16,9 @@ Sample use:
 
    <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
 
-   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+   <custom-style>
+     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+   </custom-style>
 
    <div class="layout horizontal layout-start">
      <div>cross axis start alignment</div>
@@ -25,15 +27,8 @@ Sample use:
 1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
 
-
-
-Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
-are deprecated, and should not be used. To continue using layout properties
-directly in markup, please switch to using the new `dom-module`-based
-[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
-Please note that the new version does not use `/deep/`, and therefore requires you
-to import the `dom-modules` in every element that needs to use them.
-
 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
 
+## Changes in 2.0
+- removed the deprecated `/deep/` classes -- files removed: `classes/iron-flex-layout.html`, `classes/iron-shadow-flex-layout` 
 

From 892012d4fc69413de184a04afd7069d5d63b1e2c Mon Sep 17 00:00:00 2001
From: Guille <alvarezguille@users.noreply.github.com>
Date: Tue, 18 Apr 2017 10:44:03 +0300
Subject: [PATCH 16/19] Remove nested comments affecting polylint and IE11

Apply changes from #117 to 2.0-preview branch
Fixes #116
---
 iron-flex-layout.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/iron-flex-layout.html b/iron-flex-layout.html
index 8540c9e..986c306 100644
--- a/iron-flex-layout.html
+++ b/iron-flex-layout.html
@@ -22,7 +22,6 @@
 
     Sample use:
 
-    <!---
     ```
     <custom-element-demo>
       <template>
@@ -31,7 +30,7 @@
       </template>
     </custom-element-demo>
     ```
-    -->
+
     ```html
     <link rel="import" href="iron-flex-layout-classes.html">
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>

From afec920be0cee1417f86421fb7a430f4e49b087d Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Wed, 19 Apr 2017 17:33:23 -0700
Subject: [PATCH 17/19] fix some stray @applys

---
 GUIDE.md | 60 ++++++++++++++++++++++++++++----------------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/GUIDE.md b/GUIDE.md
index e82ea6e..47bc676 100644
--- a/GUIDE.md
+++ b/GUIDE.md
@@ -126,8 +126,8 @@ main document. (They cannot be applied in the main document without a `custom-st
   <!-- main document -- apply mixins in a custom-style element -->
   <style is="custom-style">
     .container {
-      @apply(--layout-horizontal);
-      @apply(--layout-wrap);
+      @apply --layout-horizontal;
+      @apply --layout-wrap;
     }
   </style>
 
@@ -153,8 +153,8 @@ main document. (They cannot be applied in the main document without a `custom-st
   <!-- inside an element -- apply mixins in a standard style element -->
   <style>
     .container {
-      @apply(--layout-horizontal);
-      @apply(--layout-wrap);
+      @apply --layout-horizontal;
+      @apply --layout-wrap;
     }
   </style>
 
@@ -233,7 +233,7 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
 </style>
 
@@ -299,10 +299,10 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
   .flexchild {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
 </style>
 
@@ -359,10 +359,10 @@ The same rules can be used for children in vertical layouts.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-vertical);
+    @apply --layout-vertical;
   }
   .flexchild {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
 </style>
 
@@ -428,16 +428,16 @@ The classes listed here are included in the `iron-flex-factors` module of the `i
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
   .flexchild {
     @apply(--layout-flex)
   }
   .flex2child {
-    @apply(--layout-flex-2);
+    @apply --layout-flex-2;
   }
   .flex3child {
-    @apply(--layout-flex-3);
+    @apply --layout-flex-3;
   }
 </style>
 
@@ -560,8 +560,8 @@ by adding the `center` class or applying the `--layout-center` mixin.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-center);
+    @apply --layout-horizontal;
+    @apply --layout-center;
   }
 </style>
 
@@ -643,8 +643,8 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-start);
+    @apply --layout-horizontal;
+    @apply --layout-start;
   }
 </style>
 
@@ -722,8 +722,8 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-end);
+    @apply --layout-horizontal;
+    @apply --layout-end;
   }
 </style>
 
@@ -817,8 +817,8 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-center-justified);
+    @apply --layout-horizontal;
+    @apply --layout-center-justified;
   }
 </style>
 
@@ -896,8 +896,8 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-justified);
+    @apply --layout-horizontal;
+    @apply --layout-justified;
   }
 </style>
 
@@ -1028,24 +1028,24 @@ Class | Mixin | Result
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-justified);
+    @apply --layout-horizontal;
+    @apply --layout-justified;
     height: 120px;
   }
   .container div {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
   .child1 {
-    @apply(--layout-self-start);
+    @apply --layout-self-start;
   }
   .child2 {
-    @apply(--layout-self-center);
+    @apply --layout-self-center;
   }
   .child3 {
-    @apply(--layout-self-end);
+    @apply --layout-self-end;
   }
   .child4 {
-    @apply(--layout-self-stretch);
+    @apply --layout-self-stretch;
   }
 </style>
 <div class="container">
@@ -1149,7 +1149,7 @@ The classes listed here are included in the `iron-flex-reverse` module of the `i
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal-reverse);
+    @apply --layout-horizontal-reverse;
   }
 </style>
 

From 59acecd03be31a9d987864a7956d53f3a7edc703 Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Wed, 19 Apr 2017 17:52:59 -0700
Subject: [PATCH 18/19] one last @apply(...)

---
 GUIDE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/GUIDE.md b/GUIDE.md
index 47bc676..4ab18f4 100644
--- a/GUIDE.md
+++ b/GUIDE.md
@@ -431,7 +431,7 @@ The classes listed here are included in the `iron-flex-factors` module of the `i
     @apply --layout-horizontal;
   }
   .flexchild {
-    @apply(--layout-flex)
+    @apply --layout-flex;
   }
   .flex2child {
     @apply --layout-flex-2;

From d031d980ae4538a80d834a9819af32c97526058f Mon Sep 17 00:00:00 2001
From: bartolom <bart@nice-person.net>
Date: Fri, 21 Apr 2017 17:02:23 +0200
Subject: [PATCH 19/19] Consistent use of CamelCase in bower dependencies

---
 bower.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/bower.json b/bower.json
index 3394e1b..d80a860 100644
--- a/bower.json
+++ b/bower.json
@@ -18,14 +18,14 @@
     "url": "git://github.com/PolymerElements/iron-flex-layout.git"
   },
   "dependencies": {
-    "polymer": "polymer/polymer#^2.0.0-rc.1"
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
     "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
     "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
-    "iron-component-page": "polymerelements/iron-component-page#2.0-preview",
-    "iron-demo-helpers": "polymerelements/iron-demo-helpers#2.0-preview"
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview"
   },
   "ignore": [],
   "variants": {
@@ -37,8 +37,8 @@
         "test-fixture": "PolymerElements/test-fixture#^1.0.0",
         "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
         "web-component-tester": "Polymer/web-component-tester#^4.0.0",
-        "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-        "iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0"
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0"
       }
     }
   },