ricardozea
6/24/2014 - 5:44 PM

Responsive Grid based on Skeleton and 960.gs Custom Grid Generator

Responsive Grid based on Skeleton and 960.gs Custom Grid Generator

/*
		CSS Grid
		Based from the Skeleton CSS framework (http://getskeleton.com/) and 960.gs Custom Grid Generator (http://grids.heroku.com/)
		Date = June 2014
		By = Ricardo Zea
*/

//Nested Column Classes
.column, .columns { float:left; display:inline; margin:0 1%; position:relative; }
.column.alpha, .columns.alpha { margin-left:0; }
.column.omega, .columns.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:640px) {
	.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%; }
}

//Clearfix - http://davidwalsh.name/css-clear-fix
.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content:''; display:table; }

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

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

Responsive Grid based on Skeleton and 960.gs Custom Grid Generator

This my personal custom CSS grid.

  • Incredibly simple
  • Very lightweight
  • It works with ANY width
  • You can use it as CSS or SCSS
  • It's the result of many years of working with the 960 grid system and adapting it to be responsive
  • Albeit longer class names, they are more meaningful