Responsive Grid (For websites) Foundation

[iPhoenix]

Just something I cooked up for my framework but will release ahead of time. This is version.. dunno. It's a work in progress but it can still help people who're struggling with grids. Which as it so happens to be quite a few of you. It's written in SASS! You need to have sass installed and ready to compile this into normal css. I normally keep my variables in a separate file but have slapped them into one. Copy paste this, modify it and use it!

/*
	Grid System. Completely revised using SASS operators.
	Customizable if you know what you're doing and want a different
	amount of columns and/or different responsive features.
*/

/*	Variables for screen sizes - 
	The logic behind the nameing is as follows:
	ScreenResolution-"device"-"portrait/landscape" 
	results: sr-smartphone-p
*/

/* Screen Resolution for Smartphones => Portrait View */
$sr-smartphone-p: "only screen and (max-width : 320px)";
/* Screen Resolution for Smartphones => Landscape View */
$sr-smartphone-l: "only screen and (max-width : 480px)";
/* Screen Resolution for Tablets => Portrait View */
$sr-tablet-p: "only screen and (max-width : 768px)";
/* Screen Resolution for Tablets => Landscape View */
$sr-tablet-l: "only screen and (max-width : 1024px)";

/* Adjustable Padding */
$grid-padding:10px;

/* Box-Sizing */  [USER=1333445824]mix[/USER]in box-sizing{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* General All Purpose Clearfix */  [USER=1333445824]mix[/USER]in clearfix{
	content:"";
	display: block;
	width:100%;
	height:0px;
	clear:both;
	visibility: hidden;
}

/* Begin Main Grid CSS */
.grid{
	/* Clear for floating boxes */
	&:after [USER=813494]include[/USER] clearfix;}
	
	/* Making Grid Visible for debugging (Remove for production ready version) */
	&.griddemo{ .box{background:#ececec [USER=813494]include[/USER] border-radius-equal(5px);text-align:center;}}

	/* Base box style */
	.box{float:left;}

/*	Class Name			Extend Base Style		Width Config 			*/
	.box-1{			  [USER=229973]Extend[/USER] .box;			width:100 / 12 * 1%;	}
	.box-2{			  [USER=229973]Extend[/USER] .box;			width:100 / 12 * 2%;	}
	.box-3{			  [USER=229973]Extend[/USER] .box;			width:100 / 12 * 3%;	}
	.box-4{			 [USER=229973]Extend[/USER] .box;			width:100 / 12 * 4%;	}
	.box-5{			  [USER=229973]Extend[/USER] .box;			width:100 / 12 * 5%;	}
	.box-6{			  [USER=229973]Extend[/USER] .box;			width:100 / 12 * 6%;	}
	.box-7{			 [USER=229973]Extend[/USER] .box;			width:100 / 12 * 7%;	}
	.box-8{			 [USER=229973]Extend[/USER] .box;			width:100 / 12 * 8%;	}
	.box-9{			 [USER=229973]Extend[/USER] .box;			width:100 / 12 * 9%;	}
	.box-10{		 	 [USER=229973]Extend[/USER] .box;			width:100 / 12 * 10%;	}
	.box-11{		 	 [USER=229973]Extend[/USER] .box;			width:100 / 12 * 11%;	}
	.box-12{		 	 [USER=229973]Extend[/USER] .box;			width:100 / 12 * 12%;	}

/*	Class Name 			Padding Property					Box-Sizing Fix		*/
	.pad-right{				padding-right:$grid-padding;	 		 [USER=813494]include[/USER] box-sizing;}
	.pad-left{				padding-left:$grid-padding;		 	 [USER=813494]include[/USER] box-sizing;}
	.pad-top{				padding-top:$grid-padding;		 	 [USER=813494]include[/USER] box-sizing;}
	.pad-bottom{			padding-bottom:$grid-padding;	 	 [USER=813494]include[/USER] box-sizing;}
	.pad-all{				padding:$grid-padding;			  [USER=813494]include[/USER] box-sizing;}

/* 
	Responsive Features
*/ [USER=1333434998]Media[/USER] #{$sr-smartphone-l} {
		.box{width:100%;}
	}

}

How to use it in your html documents:

<div class="grid">
	<div class="box-6">This box occupies 50% space.</div>
	<div class="box-6">This box also occupies 50% space</div>
</div>

You can add as many number of "boxes" in a grid div as you like as long as the total comes to 12. In the demo above, I added two boxes of value "6". Therefore, 6+6 = 12. Basic math.

Good luck!

On a side note. The mention crap on this forum is veeeeeery annoying.