Grid Behavior

behavior-grid

#{$root-selector} {
    @include root();
}

#{$column-selector} {
	@include column-behavior();
	@include column-spacing();
}

#{$column-selector}-container {
	@include column-behavior();
}

#{$column-selector}-padding {
	@include column-spacing();
}

.bleed {
	@include bleed(); 
}

.full {
	@include column-width(1/1);
}

// Render columns
@each $fraction in $column-widths {
	$name: fraction-to-text($fraction);
	@if $name {
		.#{$name} {
			@include column-width($fraction);
		}
		.#{$name}.persistent {
			@include column-width($fraction, true);
		}
		// Source Ordering
		.push-#{$name} {
			@include push($fraction);
		}
		.pull-#{$name} {
			@include pull($fraction);
		}
	}
}

behavior-grid-output

.root { overflow: hidden; margin: 0 auto; max-width: 72em; }

.column { display: -moz-inline-stack; display: inline-block; vertical-align: top; *vertical-align: auto; zoom: 1; *display: inline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 24px; padding-right: 24px; }

.column-container { display: -moz-inline-stack; display: inline-block; vertical-align: top; *vertical-align: auto; zoom: 1; *display: inline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.column-padding { padding-left: 24px; padding-right: 24px; }

.bleed { margin-left: -24px; margin-right: -24px; }

.full { width: 100%; }

.half { width: 50%; }

.half.persistent { width: 50% !important; }

.push-half { position: relative; left: 50%; }

.pull-half { position: relative; left: -50%; }

.fourth { width: 25%; }

.fourth.persistent { width: 25% !important; }

.push-fourth { position: relative; left: 25%; }

.pull-fourth { position: relative; left: -25%; }

.third { width: 33.33333%; }

.third.persistent { width: 33.33333% !important; }

.push-third { position: relative; left: 33.33333%; }

.pull-third { position: relative; left: -33.33333%; }

.two-third { width: 66.66667%; }

.two-third.persistent { width: 66.66667% !important; }

.push-two-third { position: relative; left: 66.66667%; }

.pull-two-third { position: relative; left: -66.66667%; }

.three-fourth { width: 75%; }

.three-fourth.persistent { width: 75% !important; }

.push-three-fourth { position: relative; left: 75%; }

.pull-three-fourth { position: relative; left: -75%; }