charliepark/A Minimalist CSS Grid Framework

## A Minimalist CSS Grid Framework
This is intended to be a minimalist alternative to Blueprint (www.blueprintcss.org) and other, more fleshed-out CSS grid frameworks. Change 3 variables, and the framework does the rest for you. It's intended for use in Ruby / Rails applications.

========

Put the following in the <head> of your ERB file (either in a layout file or in a partial, if you're calling it from several pages):

<style type="text/css">
.g{BACKGROUND:RGBA(255,0,0,0.2)}
<%
  num = number_of_columns = 16
  c = column_width = 50
  g = gutter_width = 10
  (1..num).each { |n| -%>
<%= ".gc"+n.to_s+"{width:"+(n*c + g * (n-1)).to_s+"px}" %>
<% } -%>
<% t = total_grid_width = num*c + (num+1)*g -%>
.gcb{clear:both}
.gcl{clear:left}
.gcr{clear:right}
.gfl{float:left;margin:0 0 <%= g %>px <%= g %>px}
.gfr{float:right;margin:0 <%= g %>px <%= g %>px 0}
div#frame{margin:0 auto;text-align:left;width:<%= t %>px;BACKGROUND:RGBA(255,0,0,0.2)}
</style>

So. That's the CSS. You can change "num" to be whatever number of columns you want, and you can adjust the column and gutter widths to be whatever you want.

When you want to plop something in the grid, you give it two class values: gfl (grid float left) or gfr and gc#, where # is the number of columns in width. So if you want a stack of two four-column boxes on the left and a twelve-column box on the right, you could do this:
<div id="frame">
  <div class="g gfl gc4"><p>Here's my first box. It's floated left, and spans four columns.</p></div>
  <div class="g gfr gc12"><p>Here's my second box. It's floated right, and spans twelve columns.</p></div>
  <div class="g gfl gc4"><p>Here's my third box. It's also floated left, and spans four columns.</p></div>
</div>

By the way, the output within your file will look something like this (using the default values for num, c, and g):
.g{BACKGROUND:RGBA(255,0,0,0.2)}
.gc1{width:50px}
.gc2{width:110px}
.gc3{width:170px}
.gc4{width:230px}
.gc5{width:290px}
.gc6{width:350px}
.gc7{width:410px}
.gc8{width:470px}
.gc9{width:530px}
.gc10{width:590px}
.gc11{width:650px}
.gc12{width:710px}
.gc13{width:770px}
.gc14{width:830px}
.gc15{width:890px}
.gc16{width:950px}
.gfl{float:left;margin:0 0 10px 10px;}
.gfr{float:right;margin:0 10px 10px 0;}
div#frame{margin:0 auto;text-align:left;width:970px;BACKGROUND:RGBA(255,0,0,0.2)}

Once you have your framework set up the way you'd like, it's not a bad idea to copy your output and paste it in, so the values don't have to be calculated each time. At that point, you can just paste it into your external CSS file.
	This is intended to be a minimalist alternative to Blueprint (www.blueprintcss.org) and other, more fleshed-out CSS grid frameworks. Change 3 variables, and the framework does the rest for you. It's intended for use in Ruby / Rails applications.

	========

	Put the following in the <head> of your ERB file (either in a layout file or in a partial, if you're calling it from several pages):

	<style type="text/css">
	.g{BACKGROUND:RGBA(255,0,0,0.2)}
	<%
	num = number_of_columns = 16
	c = column_width = 50
	g = gutter_width = 10
	(1..num).each { \|n\| -%>
	<%= ".gc"+n.to_s+"{width:"+(nc + g (n-1)).to_s+"px}" %>
	<% } -%>
	<% t = total_grid_width = numc + (num+1)g -%>
	.gcb{clear:both}
	.gcl{clear:left}
	.gcr{clear:right}
	.gfl{float:left;margin:0 0 <%= g %>px <%= g %>px}
	.gfr{float:right;margin:0 <%= g %>px <%= g %>px 0}
	div#frame{margin:0 auto;text-align:left;width:<%= t %>px;BACKGROUND:RGBA(255,0,0,0.2)}
	</style>

	So. That's the CSS. You can change "num" to be whatever number of columns you want, and you can adjust the column and gutter widths to be whatever you want.

	When you want to plop something in the grid, you give it two class values: gfl (grid float left) or gfr and gc#, where # is the number of columns in width. So if you want a stack of two four-column boxes on the left and a twelve-column box on the right, you could do this:
	<div id="frame">
	<div class="g gfl gc4"><p>Here's my first box. It's floated left, and spans four columns.</p></div>
	<div class="g gfr gc12"><p>Here's my second box. It's floated right, and spans twelve columns.</p></div>
	<div class="g gfl gc4"><p>Here's my third box. It's also floated left, and spans four columns.</p></div>
	</div>

	By the way, the output within your file will look something like this (using the default values for num, c, and g):
	.g{BACKGROUND:RGBA(255,0,0,0.2)}
	.gc1{width:50px}
	.gc2{width:110px}
	.gc3{width:170px}
	.gc4{width:230px}
	.gc5{width:290px}
	.gc6{width:350px}
	.gc7{width:410px}
	.gc8{width:470px}
	.gc9{width:530px}
	.gc10{width:590px}
	.gc11{width:650px}
	.gc12{width:710px}
	.gc13{width:770px}
	.gc14{width:830px}
	.gc15{width:890px}
	.gc16{width:950px}
	.gfl{float:left;margin:0 0 10px 10px;}
	.gfr{float:right;margin:0 10px 10px 0;}
	div#frame{margin:0 auto;text-align:left;width:970px;BACKGROUND:RGBA(255,0,0,0.2)}

	Once you have your framework set up the way you'd like, it's not a bad idea to copy your output and paste it in, so the values don't have to be calculated each time. At that point, you can just paste it into your external CSS file.