Tiles

dabblet.css

/**
 * Tiles
 */
Body {
	background: #515151;
	min-height:100%;
	margin: 0px;
}

.Tile {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.one {
	width: 156px;
	height: 156px;
}
.two-h {
	width: 322px;
	height: 156px;
}
.two-v {
	width: 156px;
	height: 322px;
}
.four {
	width: 322px;
	height: 322px;
}
.blue {
	background: #00a9da;	
	background-image: linear-gradient(left top, #00ABDA 0%, #00BEF2 80%);
	background-image: -o-linear-gradient(left top, #00ABDA 0%, #00BEF2 80%);
	background-image: -moz-linear-gradient(left top, #00ABDA 0%, #00BEF2 80%);
	background-image: -webkit-linear-gradient(left top, #00ABDA 0%, #00BEF2 80%);
	background-image: -ms-linear-gradient(left top, #00ABDA 0%, #00BEF2 80%);
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #00ABDA),
		color-stop(0.8, #00BEF2)
	);
}
.mango {
	background: #F09809;
	background-image: linear-gradient(left top, #F09809 0%, #FC9B0A 80%);
	background-image: -o-linear-gradient(left top, #F09809 0%, #FC9B0A 80%);
	background-image: -moz-linear-gradient(left top, #F09809 0%, #FC9B0A 80%);
	background-image: -webkit-linear-gradient(left top, #F09809 0%, #FC9B0A 80%);
	background-image: -ms-linear-gradient(left top, #F09809 0%, #FC9B0A 80%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #F09809),
		color-stop(0.8, #FC9B0A)
	);
}

.lime {
	background: #8CBE29;
	background-image: linear-gradient(left top, #8CBE29 0%, #95C92C 80%);
	background-image: -o-linear-gradient(left top, #8CBE29 0%, #95C92C 80%);
	background-image: -moz-linear-gradient(left top, #8CBE29 0%, #95C92C 80%);
	background-image: -webkit-linear-gradient(left top, #8CBE29 0%, #95C92C 80%);
	background-image: -ms-linear-gradient(left top, #8CBE29 0%, #95C92C 80%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #8CBE29),
		color-stop(0.8, #95C92C)
	);
}

.magenta {
	background: #F20091;
	background-image: linear-gradient(left top, #F20091 0%, #FF0095 80%);
	background-image: -o-linear-gradient(left top, #F20091 0%, #FF0095 80%);
	background-image: -moz-linear-gradient(left top, #F20091 0%, #FF0095 80%);
	background-image: -webkit-linear-gradient(left top, #F20091 0%, #FF0095 80%);
	background-image: -ms-linear-gradient(left top, #F20091 0%, #FF0095 80%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #F20091),
		color-stop(0.8, #FF0095)
	);
}

.red {
	background: #E51300;
	background-image: linear-gradient(left top, #E51300 0%, #F01400 80%);
	background-image: -o-linear-gradient(left top, #E51300 0%, #F01400 80%);
	background-image: -moz-linear-gradient(left top, #E51300 0%, #F01400 80%);
	background-image: -webkit-linear-gradient(left top, #E51300 0%, #F01400 80%);
	background-image: -ms-linear-gradient(left top, #E51300 0%, #F01400 80%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #E51300),
		color-stop(0.8, #F01400)
	);
}

#container {
	width: 820px;
}
#firstRow div:last-child {
	margin-right: 0px;
}
#secondRow {
	position: absolute;
	top: 166px;
}
#thirdRow {
	position: absolute;
	top: 332px;
}
#fourthRow {
	position: absolute;
	top: 498px;
}
#fifthRow {
	position: absolute;
	top: 664px;
}
#secondRow div:nth-child(2) {
	position: absolute;
	left: 332px;
}
#secondRow div:nth-child(3) {
	position: absolute;
	left: 498px;
}
#thirdRow div:nth-child(2) {
	position: absolute;
	left: 166px;
}

dabblet.html

<div id="container">
	<div id="firstRow">
		<div class="Tile one blue"></div>
		<div class="Tile two-v blue"></div>
		<div class="Tile one blue"></div>
		<div class="Tile two-h blue"></div>
	</div>
	<div id="secondRow">
		<div class="Tile one red"></div>
		<div class="Tile one red"></div>
		<div class="Tile four red"></div>
	</div>
	<div id="thirdRow">
		<div class="Tile one magenta"></div>
		<div class="Tile two-h magenta"></div>
	</div>
	<div id="fourthRow">
		<div class="Tile one lime"></div>
		<div class="Tile one lime"></div>
		<div class="Tile one lime"></div>
		<div class="Tile one lime"></div>
		<div class="Tile two-v lime"></div>
	</div>
	<div id="fifthRow">
		<div class="Tile one mango"></div>
		<div class="Tile one mango"></div>
		<div class="Tile two-h mango"></div>
	</div>
</div>

settings.json

{"page":"css","view":"split-vertical"}