simonkberg · July 30, 2012 15:49
diff --git a/grid.html b/grid.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8" />

 	<title>CSS-grid Generator</title>
 	<meta name="description" content="The easiest way to construct a basic CSS-grid layout. With query-strings!" />
 	<meta name="author" content="SimonKberg" />

 	<meta name="viewport" content="width=device-width; initial-scale=1.0" />

 	<script>
 		/* ====================== */
 		/* = CSS-grid Generator = */
 		/* =    by: @SimonKberg = */
 		/* ====================== */
 		/* = Usage:             = */
 		/* =   grid.html?       = */
 		/* =     grids=24        = */
 		/* =    &width=30       = */
 		/* =    &gutter=10      = */
 		/* ====================== */
 		
 		var generateGrids = (function() {
 			var qs = (function(a) {
 			    if (a == "") return {};
 			    var b = {};
 			    for (var i = 0; i < a.length; ++i)
 			    {
 			        var p=a[i].split('=');
 			        if (p.length != 2) continue;
 			        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
 			    }
 			    return b;
 			})(window.location.search.substr(1).split('&'));
 			
 			var  css	= "<pre>"
 				,grids	= parseInt(qs['grids'])
 				,width	= parseInt(qs['width'])
 				,gutter	= parseInt(qs['gutter']);
 			
 			css += "/* ================ */\n";
 			css += "/* = The CSS Grid = */     /* "+grids+" columns, "+width+" pixels each, with "+gutter+" pixel gutter */\n";
 			css += "/* ================ */\n\n";
 			
 			for (var i = 0; i < grids; ++i) {
 				css += '.grid_'+(i+1)+' {width:'+((width*(i+1))+(i*gutter))+"px}\n";
 			};
 			
 			css += "\n\n";
 			css += ".column {\n";
 			css += "\tmargin: 0 "+(gutter/2)+"px;\n";
 			css += "\toverflow: hidden;\n";
 			css += "\tfloat: left;\n";
 			css += "\tdisplay: inline;\n";
 			css += "}\n";
 			css += ".row {\n";
 			css += "\twidth: "+((width*grids)+(gutter*(grids)))+"px;\n";
 			css += "\tmargin: 0 auto;\n";
 			css += "\toverflow: hidden;\n";
 			css += "}\n";
 			css += ".row .row {\n";
 			css += "\tmargin: 0 -"+(gutter/2)+"px;\n";
 			css += "\twidth: auto;\n";
 			css += "\tdisplay: inline-block;\n";
 			css += "}\n";
 			css += "</pre>"
 			
 			document.write(css);
 		
 		})();
 		window.onload = generateGrids;
 	</script>
 </head>

 <body>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />

	<title>CSS-grid Generator</title>
	<meta name="description" content="The easiest way to construct a basic CSS-grid layout. With query-strings!" />
	<meta name="author" content="SimonKberg" />

	<meta name="viewport" content="width=device-width; initial-scale=1.0" />

	<script>
	/* ====================== */
	/* = CSS-grid Generator = */
	/* = by: @SimonKberg = */
	/* ====================== */
	/* = Usage: = */
	/* = grid.html? = */
	/* = grids=24 = */
	/* = &width=30 = */
	/* = &gutter=10 = */
	/* ====================== */

	var generateGrids = (function() {
	var qs = (function(a) {
	if (a == "") return {};
	var b = {};
	for (var i = 0; i < a.length; ++i)
	{
	var p=a[i].split('=');
	if (p.length != 2) continue;
	b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
	}
	return b;
	})(window.location.search.substr(1).split('&'));

	var css = "<pre>"
	,grids = parseInt(qs['grids'])
	,width = parseInt(qs['width'])
	,gutter = parseInt(qs['gutter']);

	css += "/* ================ */\n";
	css += "/* = The CSS Grid = / / "+grids+" columns, "+width+" pixels each, with "+gutter+" pixel gutter */\n";
	css += "/* ================ */\n\n";

	for (var i = 0; i < grids; ++i) {
	css += '.grid_'+(i+1)+' {width:'+((width(i+1))+(igutter))+"px}\n";
	};

	css += "\n\n";
	css += ".column {\n";
	css += "\tmargin: 0 "+(gutter/2)+"px;\n";
	css += "\toverflow: hidden;\n";
	css += "\tfloat: left;\n";
	css += "\tdisplay: inline;\n";
	css += "}\n";
	css += ".row {\n";
	css += "\twidth: "+((widthgrids)+(gutter(grids)))+"px;\n";
	css += "\tmargin: 0 auto;\n";
	css += "\toverflow: hidden;\n";
	css += "}\n";
	css += ".row .row {\n";
	css += "\tmargin: 0 -"+(gutter/2)+"px;\n";
	css += "\twidth: auto;\n";
	css += "\tdisplay: inline-block;\n";
	css += "}\n";
	css += "</pre>"

	document.write(css);

	})();
	window.onload = generateGrids;
	</script>
	</head>

	<body>

	</body>
	</html>