The Grid

dabblet.css

/**
 * The Grid 
 * Version : 0.1
 */

 * { box-sizing : border-box;}

html, body {
	margin : 0;
	padding : 0;
	
	line-height : 1.5;
}

body { padding : 5%;}


/* The Grid */

.gw{
	margin-left : -25px;
	list-style : none;
	margin-bottom : 0;
}

.gw > .gw {
	margin-left : 0;
}

.g {
	padding : 0;
	margin : 0;
	
	padding-left : 25px;
	float : left;
}

/* For grid wrapper */
.gf, .gw > .gf { margin-left : 25px;}
.gf > .g{ padding-left :0;}

/* For single element */
.gp { padding-left : 37px; padding-right : 12px}

.g4-1 {width : 25%}
.g4-2 {width : 50%}
.g4-3 {width : 75%}

.g5-1 {width : 20%}
.g5-2 {width : 40%}
.g5-3 {width : 60%}
.g5-4 {width : 80%}

.g-full { width : 100%}

/* Offset */

.o4-1 {margin-left : 25%}
.o4-2 {margin-left : 50%}
.o4-3 {margin-left : 75%}

.o5-1 {margin-left : 20%}
.o5-2 {margin-left : 40%}
.o5-3 {margin-left : 60%}
.o5-4 {margin-left : 80%}

/* The theme */

.block {
	padding : .5em;
	margin-bottom : 1em;
	border : 1px solid transparent;
}

.block--solid {
	background-color : #ccc;
	border-radius : 5px;
}

.block--glass {
	border : 1px solid green;
	border-radius : 2px;
}

/* The clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both;}
.cf { *zoom: 1;}

dabblet.html

<div class="gw cf">
	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 1</p>
		</div>
	</div>
	<div class="g g4-2">
		<div class="block block--solid">
			<p>Grid 2</p>
		</div>
	</div>
	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 3</p>
		</div>
	</div>
	
	<!-- Second row -->
	
	<div class="g g5-2">
		<div class="block block--solid">
			<p>Grid 1</p>
		</div>
	</div>
	
	<!-- The nesting part -->
	
	<div class="g g5-3">
		<div class="gw cf">
		
			<div class="g g5-2">
				<div class="block block--solid">
					<p>Nest 1</p>
				</div>
			</div>
			<div class="g g5-2">
				<div class="block block--glass">
					<p>Nest 2</p>
				</div>
			</div>
			<div class="g g5-1">
				<div class="block block--solid">
					<p>Nest 3</p>
				</div>
			</div>
		
		</div> <!-- .gw -->
	</div>
		
	<!-- I heard you like grids so we put .gw inside you'r .gw -->
	<div class="gw cf">
		<div class="g g4-2">
			<div class="block block--solid">
				<p>GridGrid 1</p>
			</div>
		</div>
		<div class="g g4-2">
			<div class="block block--solid">
				<p>GridGrid 2</p>
			</div>
		</div>
	</div> <!-- .gw -->
	
	<!-- How do you like them offsets -->
	<div class="g g5-2 o5-1">
		<div class="block block--solid">
			<p>Offset 1</p>
		</div>
	</div>
	
	<div class="g g5-2">
		<div class=gw>
			<div class="g g4-2 o4-1">
				<div class="block block--glass">
					<p>Nest 1 Offset 1</p>
				</div>
			</div>
			<div class="g g4-1">
				<div class="block block--solid">
					<p>Nest 2</p>
				</div>
			</div>
		</div> <!-- .gw -->
	</div>

	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 1</p>
		</div>
	</div>
	<div class="g g4-2">
		<div class="block block--solid">
			<p>Grid 2</p>
		</div>
	</div>
	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 3</p>
		</div>
	</div>
	
	<div class="gw gf">
		<div class="g g-full">
			<h4>Full sized grid cell</h4>
			<p> This just doesn't work</p>
		</div>
		<div class="g g4-1">
			<div class="block block--glass">
				<p>Full grid</p>
			</div>
		</div>
		<div class="g g4-1">
			<div class="block block--glass">
				<p>Full grid</p>
			</div>
		</div>
		<div class="g g4-1">
			<div class="block block--glass">
				<p>Full grid</p>
			</div>
		</div>
		<div class="g g4-1">
			<div class="block block--glass">
				<p>Full grid</p>
			</div>
		</div>
	</div> <!-- .gw -->
	
	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 1</p>
		</div>
	</div>
	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 2</p>
		</div>
	</div>
	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 3</p>
		</div>
	</div>
	<div class="g g4-1">
		<div class="block block--solid">
			<p>Grid 4</p>
		</div>
	</div>

	<div class="g g4-1 gp">
		<div class="block block--solid">
			<p>Pull grid</p>
		</div>
	</div>
	<div class="g g4-1 gp">
		<div class="block block--solid">
			<p>Pull grid</p>
		</div>
	</div>
	<div class="g g4-1 gp">	
		<div class="block block--solid block--glass">
			<p>Pull grid</p>
		</div>
	</div>
	<div class="g g4-1 gp">
		<div class="block block--solid">
			<p>Pull grid</p>
		</div>
	</div>


</div> 

settings.json

{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}