Grid Framework

framework.scss

$grid-columns: 12;
$grid-width: 63px;
$grid-gutter-width: 20px;

@function grid-width($n) {
	@return ($n * $grid-width) + (($n - 1) * $grid-gutter-width);
}

.l-container {
   
}

.l-row {
    @include display-box;
    @include box-orient('horizontal');
	@include box-sizing('border-box');
    width:100%; // Firefox
}

.l-row-center {
	@extend .l-row;
	@include box-pack('center');
}

.l-cell {
    margin-left:$grid-gutter-width;
	display:block;
    &:first-child {
        margin-left:0;
    }
}

.l-span {
	@include box-sizing('border-box');
}

@for $i from 1 through $grid-columns {
    .l-span-#{$i} {
        @extend .l-span;
        width:grid-width($i);
    }
}

.l-span-flex {
	@extend .l-span;
    @include box-flex(1);
}

.l-span-full {
	@extend .l-span-#{$grid-columns};
}