// Grid system // // Generate semantic grid columns with these mixins. // Centered container element @mixin make-container($gutter: $grid-gutter-width) { margin-right: auto; margin-left: auto; padding-left: ($gutter / 2); padding-right: ($gutter / 2); @include clearfix; } @mixin make-container-widths($widths: $container-widths) { @each $breakpoint, $container-width in $widths { @media (min-width: map-get($grid-breakpoints, $breakpoint)) { width: $container-width; } } } // Creates a wrapper for a series of columns @mixin make-row($gutter: $grid-gutter-width) { margin-left: ceil(($gutter / -2)); margin-right: floor(($gutter / -2)); @include clearfix; } @mixin make-col-offset($size, $columns: $grid-columns) { margin-left: percentage($size / $columns); } @mixin make-col-push($size, $columns: $grid-columns) { left: if($size > 0, percentage($size / $columns), auto); } @mixin make-col-pull($size, $columns: $grid-columns) { right: if($size > 0, percentage($size / $columns), auto); } @mixin make-col-modifier($type, $size, $columns) { // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) @if $type == push { @include make-col-push($size, $columns); } @else if $type == pull { @include make-col-pull($size, $columns); } @else if $type == offset { @include make-col-offset($size, $columns); } }