pure css responsive 12 column grid

pure-12-column-grid.css

.pure-g {
	letter-spacing: -0.31em;
	*letter-spacing: normal;
	*word-spacing: -0.43em;
	text-rendering: optimizespeed;
}

.opera-only :-o-prefocus,
.pure-g {
	word-spacing: -0.43em;
}


.pure-u {
	display: inline-block;
	zoom: 1; *display: inline;
	letter-spacing: normal;
	word-spacing: normal;
	vertical-align: top;
	text-rendering: auto;
}


.pure-u-1,.pure-u-1-2,.pure-u-1-3,.pure-u-2-3,.pure-u-1-4,.pure-u-3-4,.pure-u-1-5,.pure-u-2-5,.pure-u-3-5,.pure-u-4-5,.pure-u-1-6,.pure-u-5-6,.pure-u-1-7,.pure-u-2-7,.pure-u-3-7,.pure-u-4-7,.pure-u-5-7,.pure-u-6-7,.pure-u-1-8,.pure-u-3-8,.pure-u-5-8,.pure-u-7-8,.pure-u-1-9,.pure-u-2-9,.pure-u-4-9,.pure-u-5-9,.pure-u-6-9,.pure-u-7-9,.pure-u-8-9,.pure-u-1-10,.pure-u-3-10,.pure-u-7-10,.pure-u-9-10,.pure-u-1-11,.pure-u-2-11,.pure-u-3-11,.pure-u-4-11,.pure-u-5-11,.pure-u-6-11,.pure-u-7-11,.pure-u-8-11,.pure-u-9-11,.pure-u-10-11,.pure-u-1-12,.pure-u-5-12,.pure-u-7-12,.pure-u-9-12,.pure-u-11-12 {
	display: inline-block;
	zoom: 1; *display: inline; 
	letter-spacing: normal;
	word-spacing: normal;
	vertical-align: top;
	text-rendering: auto;
}



.pure-u-1 {
	display:block;
}




	
	
		.pure-u-1-2 {
			width: 50%;
		}

		.pure-offset-1-2 {
			margin-left: 50%;
		}
	
		.pure-u-1-3 {
			width: 33.33333%;
		}

		.pure-offset-1-3 {
			margin-left: 33.33333%;
		}
	
		.pure-u-2-3 {
			width: 66.66667%;
		}

		.pure-offset-2-3 {
			margin-left: 66.66667%;
		}
	
		.pure-u-1-4 {
			width: 25%;
		}

		.pure-offset-1-4 {
			margin-left: 25%;
		}
	
		.pure-u-3-4 {
			width: 75%;
		}

		.pure-offset-3-4 {
			margin-left: 75%;
		}
	
		.pure-u-1-5 {
			width: 20%;
		}

		.pure-offset-1-5 {
			margin-left: 20%;
		}
	
		.pure-u-2-5 {
			width: 40%;
		}

		.pure-offset-2-5 {
			margin-left: 40%;
		}
	
		.pure-u-3-5 {
			width: 60%;
		}

		.pure-offset-3-5 {
			margin-left: 60%;
		}
	
		.pure-u-4-5 {
			width: 80%;
		}

		.pure-offset-4-5 {
			margin-left: 80%;
		}
	
		.pure-u-1-6 {
			width: 16.66667%;
		}

		.pure-offset-1-6 {
			margin-left: 16.66667%;
		}
	
		.pure-u-5-6 {
			width: 83.33333%;
		}

		.pure-offset-5-6 {
			margin-left: 83.33333%;
		}
	
		.pure-u-1-7 {
			width: 14.28571%;
		}

		.pure-offset-1-7 {
			margin-left: 14.28571%;
		}
	
		.pure-u-2-7 {
			width: 28.57143%;
		}

		.pure-offset-2-7 {
			margin-left: 28.57143%;
		}
	
		.pure-u-3-7 {
			width: 42.85714%;
		}

		.pure-offset-3-7 {
			margin-left: 42.85714%;
		}
	
		.pure-u-4-7 {
			width: 57.14286%;
		}

		.pure-offset-4-7 {
			margin-left: 57.14286%;
		}
	
		.pure-u-5-7 {
			width: 71.42857%;
		}

		.pure-offset-5-7 {
			margin-left: 71.42857%;
		}
	
		.pure-u-6-7 {
			width: 85.71429%;
		}

		.pure-offset-6-7 {
			margin-left: 85.71429%;
		}
	
		.pure-u-1-8 {
			width: 12.5%;
		}

		.pure-offset-1-8 {
			margin-left: 12.5%;
		}
	
		.pure-u-3-8 {
			width: 37.5%;
		}

		.pure-offset-3-8 {
			margin-left: 37.5%;
		}
	
		.pure-u-5-8 {
			width: 62.5%;
		}

		.pure-offset-5-8 {
			margin-left: 62.5%;
		}
	
		.pure-u-7-8 {
			width: 87.5%;
		}

		.pure-offset-7-8 {
			margin-left: 87.5%;
		}
	
		.pure-u-1-9 {
			width: 11.11111%;
		}

		.pure-offset-1-9 {
			margin-left: 11.11111%;
		}
	
		.pure-u-2-9 {
			width: 22.22222%;
		}

		.pure-offset-2-9 {
			margin-left: 22.22222%;
		}
	
		.pure-u-4-9 {
			width: 44.44444%;
		}

		.pure-offset-4-9 {
			margin-left: 44.44444%;
		}
	
		.pure-u-5-9 {
			width: 55.55556%;
		}

		.pure-offset-5-9 {
			margin-left: 55.55556%;
		}
	
		.pure-u-6-9 {
			width: 66.66667%;
		}

		.pure-offset-6-9 {
			margin-left: 66.66667%;
		}
	
		.pure-u-7-9 {
			width: 77.77778%;
		}

		.pure-offset-7-9 {
			margin-left: 77.77778%;
		}
	
		.pure-u-8-9 {
			width: 88.88889%;
		}

		.pure-offset-8-9 {
			margin-left: 88.88889%;
		}
	
		.pure-u-1-10 {
			width: 10%;
		}

		.pure-offset-1-10 {
			margin-left: 10%;
		}
	
		.pure-u-3-10 {
			width: 30%;
		}

		.pure-offset-3-10 {
			margin-left: 30%;
		}
	
		.pure-u-7-10 {
			width: 70%;
		}

		.pure-offset-7-10 {
			margin-left: 70%;
		}
	
		.pure-u-9-10 {
			width: 90%;
		}

		.pure-offset-9-10 {
			margin-left: 90%;
		}
	
		.pure-u-1-11 {
			width: 9.09091%;
		}

		.pure-offset-1-11 {
			margin-left: 9.09091%;
		}
	
		.pure-u-2-11 {
			width: 18.18182%;
		}

		.pure-offset-2-11 {
			margin-left: 18.18182%;
		}
	
		.pure-u-3-11 {
			width: 27.27273%;
		}

		.pure-offset-3-11 {
			margin-left: 27.27273%;
		}
	
		.pure-u-4-11 {
			width: 36.36364%;
		}

		.pure-offset-4-11 {
			margin-left: 36.36364%;
		}
	
		.pure-u-5-11 {
			width: 45.45455%;
		}

		.pure-offset-5-11 {
			margin-left: 45.45455%;
		}
	
		.pure-u-6-11 {
			width: 54.54545%;
		}

		.pure-offset-6-11 {
			margin-left: 54.54545%;
		}
	
		.pure-u-7-11 {
			width: 63.63636%;
		}

		.pure-offset-7-11 {
			margin-left: 63.63636%;
		}
	
		.pure-u-8-11 {
			width: 72.72727%;
		}

		.pure-offset-8-11 {
			margin-left: 72.72727%;
		}
	
		.pure-u-9-11 {
			width: 81.81818%;
		}

		.pure-offset-9-11 {
			margin-left: 81.81818%;
		}
	
		.pure-u-10-11 {
			width: 90.90909%;
		}

		.pure-offset-10-11 {
			margin-left: 90.90909%;
		}
	
		.pure-u-1-12 {
			width: 8.33333%;
		}

		.pure-offset-1-12 {
			margin-left: 8.33333%;
		}
	
		.pure-u-5-12 {
			width: 41.66667%;
		}

		.pure-offset-5-12 {
			margin-left: 41.66667%;
		}
	
		.pure-u-7-12 {
			width: 58.33333%;
		}

		.pure-offset-7-12 {
			margin-left: 58.33333%;
		}
	
		.pure-u-9-12 {
			width: 75%;
		}

		.pure-offset-9-12 {
			margin-left: 75%;
		}
	
		.pure-u-11-12 {
			width: 91.66667%;
		}

		.pure-offset-11-12 {
			margin-left: 91.66667%;
		}
	





	
	.pure-g-r {
		letter-spacing: -0.31em; 
		*letter-spacing: normal; 
		word-spacing: -0.43em; 
	}


	.opera-only :-o-prefocus,
	.pure-g-r {
		word-spacing: -0.43em;
	}


	.pure-g-r img {
		max-width: 100%;
	}

	
	
		@media (min-width:980px) {
			.pure-visible-phone     { display: none; }
			.pure-visible-tablet    { display: none; }
			.pure-visible-desktop   { }
			.pure-hidden-phone      { }
			.pure-hidden-tablet     { }
			.pure-hidden-desktop    { display: none; }
		}

	

	
		@media (max-width:480px) {
			.pure-g-r > [class ^= "pure-u"] {
				width:100%;
			}
		}
	

	
		@media (max-width:767px) {

			.pure-g-r > [class ^= "pure-u"] {
				width:100%;
			}            
			.pure-visible-phone     { } 
			.pure-hidden-phone      { display: none; }
			.pure-hidden-desktop    { }
			.pure-visible-desktop   { display: none; }
		}
	

	
		@media (min-width:768px) and (max-width:979px) {
			.pure-visible-tablet    {}
			.pure-hidden-tablet     { display: none; }
			.pure-hidden-desktop    {}
			.pure-visible-desktop   { display: none; }
		}