zz85/gss_test.html

## gss_test.html
<html>
<head>
	<script>

	GSS_CONFIG = {
		worker: "bower_components/gss/dist/worker.js",
		verticalScroll: !false
	};

	// also see https://raygun.io/blog/2014/06/next-gen-constraint-layouts-browser-grid-style-sheets/
	</script>


	<script src="bower_components/gss/dist/gss.js"></script>
	<style type="text/gss">

		.box {
	/*		width: 200px;
			height: 100px;
			margin: 20px;
	*/
			padding: 20px;
		}


		#parent {
			background: blue;
			width: == ::window[width] - 200;
			height: == ::window[height] - 200;
			center-x: == ::window[center-x];
			center-y: == ::window[center-y];
		}

		#child {
			background: red;
			width: == #parent[width] / 3;
			x: == #parent[x];
		}

		#grandchild {
			background: yellow;
			width: == #parent[width] / 3;
			x: == #child[right];
		}

		#cousin {
			background: pink;
			width: == #parent[width] / 2;
			width: >= 500 !weak;
			height: == 200;
			x: == #parent[x];
			y: == #parent[bottom] +  100;
			/*padding: 40px;
			margin: 20px;*/
		}

		/*	#family {
					#cousin[height] ==  #parent[height] !require;
					#parent[right] + 120 <= #cousin[left] !require;
					width: 100%;
				}
		*/


	</style>
</head>
<body>

	<div id="family">
		<div id="parent" class="box">
		Parent
			<div id="child" class="box">
				Child
				<div id="grandchild" class="box">
					Grandchild
				</div>
			</div>

		</div>

		<div id="cousin" class="box">
			Cousin
		</div>
	</div>


</body>
</html>
	<html>
	<head>
	<script>

	GSS_CONFIG = {
	worker: "bower_components/gss/dist/worker.js",
	verticalScroll: !false
	};

	// also see https://raygun.io/blog/2014/06/next-gen-constraint-layouts-browser-grid-style-sheets/
	</script>


	<script src="bower_components/gss/dist/gss.js"></script>
	<style type="text/gss">

	.box {
	/* width: 200px;
	height: 100px;
	margin: 20px;
	*/
	padding: 20px;
	}


	#parent {
	background: blue;
	width: == ::window[width] - 200;
	height: == ::window[height] - 200;
	center-x: == ::window[center-x];
	center-y: == ::window[center-y];
	}

	#child {
	background: red;
	width: == #parent[width] / 3;
	x: == #parent[x];
	}

	#grandchild {
	background: yellow;
	width: == #parent[width] / 3;
	x: == #child[right];
	}

	#cousin {
	background: pink;
	width: == #parent[width] / 2;
	width: >= 500 !weak;
	height: == 200;
	x: == #parent[x];
	y: == #parent[bottom] + 100;
	/*padding: 40px;
	margin: 20px;*/
	}

	/* #family {
	#cousin[height] == #parent[height] !require;
	#parent[right] + 120 <= #cousin[left] !require;
	width: 100%;
	}
	*/


	</style>
	</head>
	<body>

	<div id="family">
	<div id="parent" class="box">
	Parent
	<div id="child" class="box">
	Child
	<div id="grandchild" class="box">
	Grandchild
	</div>
	</div>

	</div>

	<div id="cousin" class="box">
	Cousin
	</div>
	</div>



	</body>
	</html>