Genesis Column Classes (SASS)

genesis-column-clases.scss

// @mixin create column widths
@function col_width( $n, $total_columns, $total_width: 1140px, $gutter_width: 48px )
{
	$col_width: ($total_width - ($gutter_width * ($total_columns - 1))) / $total_columns;
	$total_width:  $total_width;
	$columns_width:  ($n * $col_width) + (($n - 1) * $gutter_width);
	@return percentage($columns_width/$total_width);
}

//
// Column Classes
//  --------------------------------------------------


$row-width: 1110px !default;
$column-gutter: 30px !default;


// small up
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
		margin: 0;
		width: 100%;
}



@media #{$medium-only} {
      
	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
			float: left;
			margin-left: percentage($column-gutter / $row-width);
			width: col_width( 1, 2, $row-width, $column-gutter );
			
			&:nth-child(2n) {
				margin-left: 0;	
			}
	}

}



@media #{$large-up} {
      

	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
			float: left;
			margin-left: percentage($column-gutter / $row-width);
	}
	
	.one-half,
	.three-sixths,
	.two-fourths {
			width: col_width( 1, 2, $row-width, $column-gutter );
	}
	
	.one-third,
	.two-sixths {
			width: col_width( 1, 3, $row-width, $column-gutter ); 
	}
	
	.two-thirds,
	.four-sixths {
			width: col_width( 2, 3, $row-width, $column-gutter ); 
	}
	
	.one-fourth {
			width: col_width( 1, 4, $row-width, $column-gutter );
	}
	
	.three-fourths {
			width: col_width( 3, 4, $row-width, $column-gutter );
	}
	
	.one-fifth {
			width: col_width( 1, 5, $row-width, $column-gutter );
	}
	
	.two-fifths {
			width: col_width( 2, 5, $row-width, $column-gutter );
	}
	
	.three-fifths {
			width: col_width( 3, 5, $row-width, $column-gutter ); 
	}
	
	.four-fifths {
			width: col_width( 4, 5, $row-width, $column-gutter );
	}
	
	.one-sixth {
			width: col_width( 1, 6, $row-width, $column-gutter );
	}
	
	.five-sixths {
			width: col_width( 5, 6, $row-width, $column-gutter );
	}
	
	.first {
			margin-left: 0;
	}

}