From e07a6cff84f6f87e2ada305064cbf8c2fcd64313 Mon Sep 17 00:00:00 2001
From: Sam Li <samli@google.com>
Date: Tue, 18 Apr 2017 16:03:39 -0700
Subject: [PATCH] Add inline demo for readme (#119)

---
 GUIDE.md  | 21 +++++++++++++++++++++
 README.md | 42 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/GUIDE.md b/GUIDE.md
index e82ea6e..67a9e30 100644
--- a/GUIDE.md
+++ b/GUIDE.md
@@ -205,6 +205,7 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -271,6 +272,7 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -331,6 +333,7 @@ The same rules can be used for children in vertical layouts.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -400,6 +403,7 @@ The classes listed here are included in the `iron-flex-factors` module of the `i
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -456,6 +460,7 @@ By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching i
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -495,6 +500,7 @@ by adding the `center` class or applying the `--layout-center` mixin.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -531,6 +537,7 @@ by adding the `center` class or applying the `--layout-center` mixin.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -579,6 +586,7 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -615,6 +623,7 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -658,6 +667,7 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -694,6 +704,7 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -753,6 +764,7 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -789,6 +801,7 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -832,6 +845,7 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -868,6 +882,7 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -913,6 +928,7 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -961,6 +977,7 @@ Class | Mixin | Result
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -1000,6 +1017,7 @@ Class | Mixin | Result
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -1070,6 +1088,7 @@ Wrapped layouts can be enabled with the `wrap` class or `--layout-wrap` mixin.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
@@ -1121,6 +1140,7 @@ The classes listed here are included in the `iron-flex-reverse` module of the `i
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout.html">
     <dom-module id="demo-element">
       <template>
@@ -1209,6 +1229,7 @@ to fit inside of.
 ```
 <custom-element-demo>
   <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
diff --git a/README.md b/README.md
index db013a2..d5aac2f 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),
@@ -14,13 +14,41 @@ in every element that needs to use them.
 
 Sample use:
 
-   <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+<!--
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="iron-flex-layout-classes.html">
+    <dom-module id="demo-element">
+      <template>
+        <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+        <style>
+          .container, .layout {
+            background-color: #ccc;
+            padding: 4px;
+          }
 
-   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-
-   <div class="layout horizontal layout-start">
-     <div>cross axis start alignment</div>
-   </div>
+          .container div, .layout div {
+            background-color: white;
+            padding: 12px;
+            margin: 4px;
+          }
+        </style>
+        <next-code-block></next-code-block>
+      </template>
+      <script>Polymer({is: "demo-element"});</script>
+    </dom-module>
+    <demo-element></demo-element>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<div class="layout horizontal layout-start" style="height: 154px">
+  <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.