grid.scss

//Variables for grid. Replace with your values.
$gutter: 10px;
$column_width: 71px;
$total_columns: 12;
$text_based_input_padding: 2px;

//Calculates page width. Please do not alter.
$total_page_width: (($total_columns * $column_width) + (($total_columns - 1) * $gutter));

//shared styles and mixins
.block
{
    display: block;
}

@mixin float($float)
{
    float: $float;
}

@mixin clear($clear)
{
    clear: $clear;
}

@mixin top($top)
{
    top: $top;
}

@mixin font_size($size)
{
    font:
    {
        size: $size;
    }
}


//The Grid
label
{
    float: left;
    margin-left: $gutter;
}

//calculate grid unit, text-base and select input and table cell widths
@for $i from 1 through $total_columns
{
	$width: ($column_width * $i) + ($gutter * ($i - 1));
	
	//columns
	.unitx#{$i}
	{
		@if $i == $total_columns
		{
			margin-left: 0 !important;
                        width: $total_page_width;
		}
        @else
        {
            width: $width;
        }
	}
	
	//text-based and select form inputs
	label.unitx#{$i}
	{
		input[type="text"],
		input[type="password"],
		input[type="select"],
		input[type="search"],
		input[type="tel"],
		input[type="email"],
		input[type="url"],
		select
		{
			width: ($width - ($text_based_input_padding * 2));
		}
	}
	
	//form labels
	label.unitx#{$i}
	{
		@if $i == 1 or $i == $total_columns
		{
			margin-left: 0;
		}
		
		@if $i == $total_columns
		{
			width: $total_page_width;
			float: none;
		}
	}
	
	//table cells
	th, td
	{
		&.unitx#{$i}
		{
			width: $width;
		}
	}
}

#page
{
	width: $total_page_width;
	position: relative;
	padding: 0 $gutter;
	
	&:after
	{
		@extend .block;
		@include clear(both);
		content: ".";
		height: 0;
		visibility: hidden;
	}
}

/* Base column markup */
.column
{
    display: block;
    float: left;
    margin-left: $gutter;
    
    &.first
    {
        margin-left: 0;
    }
}

.colgroup, .align-left, .clear
{
	@extend .block;
	@include float(left);
}

.first, .no-gutter
{
	margin-left: 0;
}

.first			{ @include clear(left); }
.gutter			{ margin-left: $gutter; }
.align-right	        { @include float(right); text-align: right; }
header,
section			{ padding-bottom: 18px; }

.leading		{ margin-bottom: 18px; }
.noleading		{ margin-bottom: 0 !important; }