// // Configuration // $griddo-behavior: false !default; $griddo-float: left !default; $griddo-float-opposite: right !default; $griddo-gutter: 1.875em !default; $griddo-columns: 12 !default; $griddo-row-width: 62.5em !default; $griddo-dividend: false !default; $griddo-divisor: $griddo-columns !default;
// // Function for calculate percentage. // @function griddo-calc($griddo-dividend, $griddo-divisor) {
@return percentage(($griddo-dividend / $griddo-divisor));
}
// // Intializes a row. // @mixin griddo-row($griddo-behavior: false, $griddo-gutter: $griddo-gutter) {
@include griddo-clearfix; clear: both; list-style: none; padding: 0; @if $griddo-behavior == nest { @include griddo-row-nest($griddo-gutter: $griddo-gutter); } @else if $griddo-behavior == collapse { @include griddo-row-collapse; } @else if $griddo-behavior == nest-collapse { @include griddo-row-nest-collapse; } @else { @include griddo-row-default; }
}
// // Row type: Default // @mixin griddo-row-default {
margin: 0 auto; max-width: $griddo-row-width; width: 100%;
}
// // Row type: Nest // @mixin griddo-row-nest($griddo-gutter: $griddo-gutter) {
margin: 0 (-($griddo-gutter / 2)); max-width: none; width: auto;
}
// // Row type: Collapse // @mixin griddo-row-collapse {
margin: 0; max-width: $griddo-row-width; width: 100%;
}
// // Row type: Nest collapse // @mixin griddo-row-nest-collapse {
margin: 0; max-width: none; width: auto;
}
// // Render a column. // @mixin griddo-column($griddo-dividend: false, $griddo-divisor: $griddo-columns, $griddo-gutter: $griddo-gutter) {
float: $griddo-float; list-style: none; min-height: 1px; position: relative; @include griddo-gutter($griddo-gutter); @if $griddo-dividend { @include griddo-width($griddo-dividend, $griddo-divisor); }
}
// // Return calculated width. // @mixin griddo-width($griddo-dividend, $griddo-divisor: $griddo-columns) {
width: griddo-calc($griddo-dividend, $griddo-divisor);
}
// // Set gutter // @mixin griddo-gutter($griddo-gutter: $griddo-gutter) {
padding-left: ($griddo-gutter / 2); padding-right: ($griddo-gutter / 2);
}
// // Default float. // @mixin griddo-float {
float: $griddo-float;
}
// // Center a column or item. // @mixin griddo-centered {
float: none; margin: 0 auto;
}
// // Float last column on opposite side. // @mixin griddo-last {
float: $griddo-float-opposite;
}
// // Offset a column. // @mixin griddo-offset($griddo-dividend: 1, $griddo-divisor: $griddo-columns) {
margin-#{$griddo-float}: griddo-calc($griddo-dividend, $griddo-divisor);
}
// // Push a column. // @mixin griddo-push($griddo-dividend: 1, $griddo-divisor: $griddo-columns) {
#{$griddo-float}: griddo-calc($griddo-dividend, $griddo-divisor); #{$griddo-float-opposite}: auto;
}
// // Pull a column. // @mixin griddo-pull($griddo-dividend: 1, $griddo-divisor: $griddo-columns) {
#{$griddo-float-opposite}: griddo-calc($griddo-dividend, $griddo-divisor); #{$griddo-float}: auto;
}
// // Collapse something // @mixin griddo-collapse {
padding-left: 0; padding-right: 0;
}
// // Make a single element behave like a row with one column of 100% width. // @mixin griddo-container($griddo-behavior: false, $griddo-gutter: $griddo-gutter) {
@include griddo-row($griddo-behavior); @include griddo-gutter($griddo-gutter);
}
// // Clear floats. // @mixin griddo-clearfix {
*zoom:1; &:before, &:after { content: " "; display: table; } &:after { clear: both; }
}
// // Create grid classes. // @mixin griddo-classes($row-class: row, $column-class: column, $columns-class: column, $total-columns: $griddo-columns, $offset-class: offset, $push-class: push, $pull-class: pull) {
.#{$row-class} { @include griddo-row; &.collapse { .#{$column-class} { @include griddo-collapse; } } .#{$row-class} { @include griddo-row(nest); &.collapse { @include griddo-row(nest-collapse); } } } @if $column-class != false { .#{$column-class} { @include griddo-column; } .#{$column-class}.centered { @include griddo-centered; } [class*="#{$column-class}"] + [class*="#{$column-class}"]:last-child { @include griddo-last; } [class*="#{$column-class}"] + [class*="#{$column-class}"].end { @include griddo-float; } } @for $i from 1 through $total-columns { .#{$columns-class}#{-$i} { @include griddo-width($i, $total-columns); } } @for $i from 1 through $total-columns - 1 { .#{$offset-class}#{-$i} { @include griddo-offset($i, $total-columns); } .#{$push-class}#{-$i} { @include griddo-push($i, $total-columns); } .#{$pull-class}#{-$i} { @include griddo-pull($i, $total-columns); } }
}