Sass (Bootstrap) Grid Mixin

Readme.markdown

A Sass equivilent to the Twitter Bootstrap Grid Mixin

What?

This is supposed to be an exact replica of Bootstrap Grid made by Twitter, except made in Sass.

Why?

Since the variables are easily editable, it means it is ideal for projects which all use the same mixins.. Simply change a couple of variables so the grid system can match the design template, and you're away!

But you can already get a customized version automatically built...

This is quicker.

Revisions

1

Initial Commit

2

Switched the ordering of the each and for because col-xs-7 would overwrite col-sm-6 (as the end number is larger). Better Sass for a smaller more easy to maintain file.

3

$padding changed to $gutter.

4

Added Readme file.

_grid.scss

////////////
// Config
////////////

$columns:12;
$percent:100% / $columns;
$gutter:15px;
$max-width:960px;

$sm:600px;
$md:992px;
$lg:1200px;

////////////
// Main
////////////

*, *:before, *:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.container {
	position: relative;
	max-width:$max-width;
	margin-right:auto;
	margin-left:auto;
	padding-left:$gutter;
	padding-right:$gutter;
}

.row {
	margin-left:-$gutter;
	margin-right:-$gutter;

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

	&:after {
		clear:both;
	}
}

[class^="col-"] {
	float:left;
	position:relative;
	width:100%;
	min-height:1px;
	padding-left:$gutter;
	padding-right:$gutter;
}

@each $size in xs, sm, md, lg {
	$min-width:0;
	@if $size == xs {
		$min-width:0px;
	}
	@else if $size == sm {
		$min-width:$sm;
	}
	@else if $size == md {
		$min-width:$md;
	}
	@else if $size == lg {
		$min-width:$lg;
	}
	
	@for $i from 0 through $columns - 1 {
		$x:$columns - $i;
		
		@media (min-width:$min-width) {
			.col-#{$size}-#{$x} {
				float:left;
				width:$percent * $x;
			}

			.col-#{$size}-pull-#{$x} {
				left:-$percent * $x;
			}

			.col-#{$size}-push-#{$x} {
				left:$percent * $x;
			}

			.col-#{$size}-offset-#{$x} {
				margin-left:$percent * $x;
			}
		}
	}
}

@-ms-viewport {
	width:device-width;
}

.alpha {
	padding-left:0px;
}
.omega {
	padding-right:0px;
}