Variable Grid System Generated Stylesheet

960.TT

<#@ template language="C#" #>
<#@ output extension=".css" #>
/*	
	Variable Grid System Generated Stylesheet
	v.0.1 alpha
	Author: Caspar Kleijne
	Contact: twitter.com/caspar_kleijne
	
	Converted for TT from 960 Grid System - http://960.gs/
	Via ~ http://www.spry-soft.com/grids/
	
	Licensed under GPL and MIT.
*/
<# 
    /** NOTE: **
    ----------------------------------------------------------------
    There are Issues with tangible T4 Editor in Visual Studio 2010 and TT generation.
    But this happens only in (plain)Websites NOT in (MVC-)Projects
    Using this third party plugin can make "chinese garbage characters" of the output of this file 
    My fix was to completely uninstall the plugin and restart Visual Studio. **/

	/** configuration ---------------------------------------------------------------**/
		
	/** width of the outer container (wrapper) wher the columns in reside 
		preferably use default value of 960. **/
	int containerWidth = 960;	
	
	/** the number of columns 
		preferably use default value of 12 **/
	int columnCount = 12;	
 
	/** the width in pixels of the smallest column 
		preferably use default value of 60. **/
	int columnWidth = 60;	
	
	/** the width in pixels of the gutter between each column
		preferably use default value of 20. **/
	int gutterWidth = 20;	
   
   	/** if set to true the width of the columns will be recalculated
		to fit inside the given width of the container **/
	bool fitColumns = true;

	/** the template text for the generated css classes output **/
	string columntemplate 	= ".container .grid_{0} {{width: {1}px;}}";
	string prefixtemplate 	= ".container .prefix_{0} {{padding-left: {1}px;}}";
	string suffixtemplate 	= ".container .suffix_{0} {{padding-right: {1}px;}}";
	string pushtemplate 	= ".container .push_{0} {{left: {1}px;}}";
	string pulltemplate 	= ".container .pull_{0} {{left: {1}px;}}";

	/** end of configuration --------------------------------------------------------**/

	
	
	/** calculations ----------------------------------------------------------------**/

	/** the width of the columns will be recalculated
		to fit inside the given width of the container 
		if set by fitColumns flag **/
	
	if(fitColumns && columnCount > 0)
	{
	     columnWidth = ( containerWidth / columnCount ) - gutterWidth;
	}


	/** end of calculations ---------------------------------------------------------**/


	/** generation ------------------------------------------------------------------**/
#>

/* container class */
.container {
	margin-left:auto;
	margin-right:auto;
	width:<#=containerWidth#>px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last) */
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* columns classes */
<#
for(int c = 1; c<=columnCount;c++)
{
#>
<#=String.Format(".grid_{0}{1}",c,c < columnCount ? ",\n":"")#><#}#> {
	display: inline;
	float: left;
	position: relative;
	margin-left: <#= gutterWidth/2 #>px;
	margin-right: <#= gutterWidth/2 #>px;
	
	min-height: 100px;
	background-color: #eeffff;
}
<#
for(int c = 1; c<=columnCount-1;c++)
{
#>

/* <#= c #> Column  definitions */
<#=	String.Format(columntemplate,c,(columnWidth*c)+(gutterWidth*(c-1)))#>
<#=	String.Format(prefixtemplate,c,(columnWidth+gutterWidth)*c)#>
<#=	String.Format(suffixtemplate,c,(columnWidth+gutterWidth)*c)#>
<#=	String.Format(pushtemplate,c,(columnWidth+gutterWidth)*c)#>
<#=	String.Format(pulltemplate,c,-(columnWidth+gutterWidth)*c)#>
<#}#>

/* <#= columnCount #> Column  definitions */
<#=	String.Format(columntemplate,columnCount,(columnWidth*columnCount)+(gutterWidth*(columnCount-1))
)#>

/* Clear Floated Elements
/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {height: 1%;}

.clearfix {display: block;}

<#
	/** end of generation ------------------------------------------------------------**/
#>

This is the very first version, any comments, fixes, anything, are more than appriciated!

There are Issues with tangible T4 Editor in Visual Studio 2010 and TT generation.
Using this third party plugin can make "chinese garbage characters" of the output of this file
But this happens only in Websites not in (MVC) Projects
My fix was to completely uninstall the plugin and restart Visual Studio.