jmadler · May 12, 2017 18:40
diff --git a/ampbind.amp.html b/ampbind.amp.html

 <!doctype html>
 <html ⚡>
 <head>
  <meta charset="utf-8">
  <link rel="canonical" href="<%host%>/advanced/layout_system/" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="amp-experiment-token" content="HfmyLgNLmblRg3Alqy164Vywr">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp-custom>
  div.square {
    display: inline-block;
    width: 200px;
    height:200px;
    background-color: grey;
    margin: 5px;
  }

  div.vtphone {
    /* a 16x9 device in portrait mode */
    width: 90px;
    height: 160px;
  }
  div.hzphone {
    /* a 16x9 device in landscape mode */
    width: 160px;
    height: 90px;
  }
  div.desktop {
    /* a 4:3 device in landscape mode */
    width: 400px;
    height: 300px;
  }
  </style>
 </head>
 <body>
  <amp-state id="deviceEmulation">
    <script type="application/json">
      {
        "hzphone": "square hzphone",
        "vtphone": "square vtphone",
        "desktop": "square desktop"
      }
    </script>
  </amp-state>

  <!-- #### responsive
    AMP HTML has a number of different layout types.  The most common of these is the responsive layout attribute value.

    When an element is given a height, width, and the layout="responsive" attribute value, it will use the height and width to calculate an aspect ratio, and responsively scale the element's box to match the width of the parent element.
  -->
  <div>
    <div class="square" [class]="deviceEmulation[deviceId]"><amp-fit-text width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
    <button on="tap:AMP.setState({deviceId: 'vtphone'})">Set to Vertical Phone</button>
    <button on="tap:AMP.setState({deviceId: 'desktop'})">Set to Desktop</button>
    <button on="tap:AMP.setState({deviceId: 'hzphone'})">Set to Horizontal Phone</button>
  </div>
 </body>
 </html>

	<!doctype html>
	<html ⚡>
	<head>
	<meta charset="utf-8">
	<link rel="canonical" href="<%host%>/advanced/layout_system/" >
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<meta name="amp-experiment-token" content="HfmyLgNLmblRg3Alqy164Vywr">
	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
	<script async src="https://cdn.ampproject.org/v0.js"></script>
	<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
	<style amp-custom>
	div.square {
	display: inline-block;
	width: 200px;
	height:200px;
	background-color: grey;
	margin: 5px;
	}

	div.vtphone {
	/* a 16x9 device in portrait mode */
	width: 90px;
	height: 160px;
	}
	div.hzphone {
	/* a 16x9 device in landscape mode */
	width: 160px;
	height: 90px;
	}
	div.desktop {
	/* a 4:3 device in landscape mode */
	width: 400px;
	height: 300px;
	}
	</style>
	</head>
	<body>
	<amp-state id="deviceEmulation">
	<script type="application/json">
	{
	"hzphone": "square hzphone",
	"vtphone": "square vtphone",
	"desktop": "square desktop"
	}
	</script>
	</amp-state>

	<!-- #### responsive
	AMP HTML has a number of different layout types. The most common of these is the responsive layout attribute value.

	When an element is given a height, width, and the layout="responsive" attribute value, it will use the height and width to calculate an aspect ratio, and responsively scale the element's box to match the width of the parent element.
	-->
	<div>
	<div class="square" [class]="deviceEmulation[deviceId]"><amp-fit-text width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
	<button on="tap:AMP.setState({deviceId: 'vtphone'})">Set to Vertical Phone</button>
	<button on="tap:AMP.setState({deviceId: 'desktop'})">Set to Desktop</button>
	<button on="tap:AMP.setState({deviceId: 'hzphone'})">Set to Horizontal Phone</button>
	</div>
	</body>
	</html>