scss Sass partial：960-12col Grid

Posted 2021-05-18

/*
	Custom Grid Sass partial by Ricardo Zea	
	Based on the 960 and Skeleton grid systems
	http://960.gs
	http://www.getskeleton.com	
*/

//Nested Column Classes
.column, .columns { display:inline; float:left; margin:0 1%; }
.alpha { margin-left:0; }
.omega { margin-right:0; }

//12 Column Base Grid
.one.column 	{ width:6.3330%; }
.two.columns 	{ width:14.667%; }
.three.columns 	{ width:23.000%; }
.four.columns 	{ width:31.333%; }
.five.columns 	{ width:39.667%; }
.six.columns 	{ width:48.000%; }
.seven.columns 	{ width:56.333%; }
.eight.columns 	{ width:64.667%; }
.nine.columns 	{ width:73.000%; }
.ten.columns 	{ width:81.333%; }
.eleven.columns { width:89.667%; }
.twelve.columns { width:98.000%; }

@media only screen and (max-width:20em) { // 320/16
	.one.column,
	.two.columns,
	.three.columns,
	.four.columns,
	.five.columns,
	.six.columns,
	.seven.columns,
	.eight.columns,
	.nine.columns,
	.ten.columns,
	.eleven.columns,
	.twelve.columns { width:100%; margin:0; }
}

//.clearfix and .row
.clearfix:after,
.row:after { content:''; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }

.row:after,
.clearfix:after { clear:both; }
.row,
.clearfix { clear:both; zoom:1; }