Simple SASS grid system meant to be light weight and easy to use

SASS Grid System

/************************************************************************/
/* GRID VARIABLES
/************************************************************************/

$grid-gutter-width      : 15px;
$grid-column-amount     : 12;
$grid-large-breakpoint  : 1200px;
$grid-medium-breakpoint : 992px;
$grid-small-breakpoint  : 768px;

/************************************************************************/
/* GRID SYSTEM
/************************************************************************/

.grid-container {
	margin  : 0 auto;
	padding : 0 $grid-gutter-width;
}

.grid-row {
	margin : 0 (-$grid-gutter-width);
}

.grid-column {
	padding : 0 $grid-gutter-width;
	margin  : $grid-gutter-width 0;
}

@media ( min-width: $grid-small-breakpoint ) {

	.grid-container {
		width   : $grid-small-breakpoint - 18px;
		padding : 0;
	}

	.grid-row {

		&:before,
		&:after {
			content : " ";
			display : table;
		}

		&:after {
			clear : both;
		}

	}

	.grid-column {
		float : left;
	}

	@for $i from 1 through $grid-column-amount {

		.grid-column-#{$i} {
			width : ( $i / $grid-column-amount ) * 100%;
		}
		
		.grid-column-offset-#{$i} {
			margin-left : ( $i / $grid-column-amount ) * 100%;
		}

	}
  
}

@media ( min-width: $grid-medium-breakpoint ) {

	.grid-container {
		width : $grid-medium-breakpoint - 22px;
	}
  
}

@media ( min-width: $grid-large-breakpoint ) {

	.grid-container {
		width : $grid-large-breakpoint - 30px;
	}
  
}