CSS - Basic responsive grid setup

CSS-responsive-grid.css

/* this is based off of http://cobyism.com/gridism/ */

/* responsive grid setup - going mobile first here
-------------------------------------------------------------------------------*/

.grid {
	display: block;
	clear: both;
}

.grid .unit {
	border:0px solid rgba(0,0,0,0);
	float:left;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-moz-background-clip:padding-box !important;
	-webkit-background-clip:padding-box !important;
	background-clip:padding-box !important;
}

.grid .center {
	margin: 0 auto;
	float: none;
}

.grid { *zoom: 1; }

.grid:before,
.grid:after {
	display: table;
	content: "";
	line-height: 0;
}

.grid:after { clear: both; }

.grid .w-1,
.grid .w-2,
.grid .w-3,
.grid .w-4,
.grid .w-5,
.grid .w-6,
.grid .w-7,
.grid .w-8,
.grid .w-9,
.grid .w-10,
.grid .w-11,
.grid .w-12 {
	width: 100%;
}


/* tablet/desktop styles */
@media only screen and (min-width: 768px) {
	
	.grid {
		/* margin-left:-12px; - uncomment for padding */
	}

	.grid .unit {
	    border:0px solid rgba(0,0,0,0);
		/* border-left-width: 12px; - uncomment for padding */
		padding: 0;
	}
	
	.grid .w-1 { width:8.33333333333%; }
	.grid .w-2 { width:16.6666666667%; }
	.grid .w-3 { width:25.0%; }
	.grid .w-4 { width:33.3333333333%; }
	.grid .w-5 { width:41.6666666667%; }
	.grid .w-6 { width:50.0%; }
	.grid .w-7 { width:58.3333333333%; }
	.grid .w-8 { width:66.6666666667%; }
	.grid .w-9 { width:75.0%; }
	.grid .w-10 { width:83.3333333333%; }
	.grid .w-11 { width:91.6666666667%; }
	.grid .w-12 { width:100%; margin-left:0; }
	
}

HTML-responsive-grid-markup.html

<div class="grid">

	<div class="unit w-12">
	
	</div><!-- END .unit.w-12 -->

</div><!-- END .grid -->

<div class="grid">

	<div class="unit w-8">
	
	</div><!-- END .unit.w-8 -->
	
	<div class="unit w-4">
	
	</div><!-- END .unit.w-4 -->

</div><!-- END .grid -->