@import "compass/utilities" @import "compass/css3" // Modules @import "modules/awesome-clearfix" // Configure Grid Coordinates $grid-columns: 12 !default $grid-width: 60px !default $grid-gutter-width: 20px !default // Support for deprecated clearfix options // See modules/awesome-clearfix for details $support-legacy-grid-clearfix: true !default =grid-coordinates .a-clearfix @include a-clearfix @if $support-legacy-grid-clearfix .grid-clearfix, .grid-pie-clearfix @extend .a-clearfix .grid-container @include grid-container-base @extend .a-clearfix .nested-grid-container @include nested-grid-container-base @extend .a-clearfix .grid-block @include grid-block-base @extend .a-clearfix .grid-full @include grid-base($grid-columns) @extend .grid-block // Loops @for $i from 1 through $grid-columns .grid-#{$i} @include grid-base($i) @extend .grid-block @for $i from 1 through $grid-columns - 1 .grid-prefix-#{$i} @include grid-prefix($i) @for $i from 1 through $grid-columns - 1 .grid-suffix-#{$i} @include grid-suffix($i) @for $i from 1 through $grid-columns - 1 .grid-push-#{$i} @include grid-push($i) @for $i from 1 through $grid-columns - 1 .grid-pull-#{$i} @include grid-pull($i) // Grid Container =grid-container-base margin: right: auto left: auto width: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width) =grid-container @include a-clearfix @include grid-container-base // Nested Container =nested-grid-container-base display: inline-block margin: left: -($grid-gutter-width / 2) right: -($grid-gutter-width / 2) width: auto =nested-grid-container @include a-clearfix @include nested-grid-container-base // Grid Block =grid-block-base @include box-sizing(border-box) @include float-left position: relative margin: right: ($grid-gutter-width / 2) left: ($grid-gutter-width / 2) =grid-block @include grid-block-base @include a-clearfix // Grid =grid-base($grid-columns) @include grid-width($grid-columns) =grid($grid-columns) @include grid-base($grid-columns) @include grid-block =grid-full @include grid($grid-columns) // Grid logic =grid-width($grid-columns) @if $grid-columns == 1 width: $grid-width @else width: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) - $grid-gutter-width =grid-prefix($grid-columns) margin-left: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) + ($grid-gutter-width / 2) =grid-suffix($grid-columns) margin-right: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) + ($grid-gutter-width / 2) =grid-push($grid-columns) left: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width) =grid-pull($grid-columns) left: -($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)