sparkofreason/gss-polymer.html

## gss-polymer.html
<!DOCTYPE html>
<html>
<head>
   <link rel="import" href="/paper-slider/paper-slider.html">
</head>
<body>

<div>
    <style type="text/gss">
    #d1 {
    width:  == $my-width;
    height:  == $my-height;
    }

    #d2 {
    width:  == $my-width;
    height:  == $my-height;
    };
    #d1[right] == #d2[left];
    #d1[bottom] == #d2[top];
    #d1[top] == #slider[bottom];
    </style>
    <paper-slider id="slider"></paper-slider>
    <div id="d1" style="background-color: red;"></div>
    <div id="d2" style="background-color: green;"></div>
</div>

<script src="/gss/dist/gss.js"></script>
<script type="text/javascript">
  window.engine = new GSS(document, {"my-width": 200, "my-height": 200});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="import" href="/paper-slider/paper-slider.html">
	</head>
	<body>

	<div>
	<style type="text/gss">
	#d1 {
	width: == $my-width;
	height: == $my-height;
	}

	#d2 {
	width: == $my-width;
	height: == $my-height;
	};
	#d1[right] == #d2[left];
	#d1[bottom] == #d2[top];
	#d1[top] == #slider[bottom];
	</style>
	<paper-slider id="slider"></paper-slider>
	<div id="d1" style="background-color: red;"></div>
	<div id="d2" style="background-color: green;"></div>
	</div>

	<script src="/gss/dist/gss.js"></script>
	<script type="text/javascript">
	window.engine = new GSS(document, {"my-width": 200, "my-height": 200});
	</script>

	</body>
	</html>