// ----------------------------------------- // GRID with MARGIN // *Deprecated* since v 0.1, use block-grid instead // Using margin for distance between grid // ----------------------------------------- $row-width : em($content-width) !default; $column-padding : em(0px) !default; $column-margin : em(25px) !default; // Margin between column at maximum row's width $total-columns : 12 !default; // Calculate percentages for grid @function gridCalc($colNumber, $totalColumns: $total-columns, $collapse: false ) { $baseSize : percentage( $colNumber / $totalColumns ); // Additional size due to margin between grid. $fillSize : 0 !default; @if $collapse == false { $fillSize : $colNumber * ( gridMarginCalc() / $totalColumns ); } @return $baseSize + $fillSize; } // Calculate percentages for Margin between grid @function gridMarginCalc($colMargin: $column-margin, $rowWidth: $row-width) { @return percentage( $colMargin / $rowWidth ); } // Create ROW @mixin grid-row($behavior: false, $minify: false) { @if $minify == false { @include clearfix; } // use @include grid-row(nest); to include a nested row @if $behavior == nest { width : auto; max-width : none; margin-#{$default-float} : -($column-padding); margin-#{$default-opposite} : -($column-padding); } // use @include grid-row(collapse); to collapse a container row margins @else if $behavior == collapse { width : 100%; max-width : $row-width; margin : 0; } // use @include grid-row(nest-in-non-collapse); to collapse outer margins of nested-row inside non-collapsed-row @else if $behavior == nest-in-non-collapse { width : auto; max-width : none; } // use @include grid-row(nest-in-collapse); to collapse outer margins of nested-row inside collapsed-row @else if $behavior == nest-in-collapse { width : auto; max-width : none; margin : 0; } // use @include grid-row; to use a container row @else { width : 100%; max-width : $row-width; margin : 0 auto; } } // Create COLUMN @mixin grid-column($columns : false, $last-column : false, $center : false, $offset : false, $push : false, $pull : false, $collapse : false, $minify : false, // Remove style redundancy $float : left ) { $not-for-columns : $push == false and $pull == false; // If column number not specified @if $columns == false and $minify and $not-for-columns { position : relative; margin-#{$default-opposite} : gridMarginCalc(); &:last-child { margin-#{$default-opposite} : 0; } } // If not collapse, add padding @if $collapse == false and $minify == false { padding-left : $column-padding; padding-right : $column-padding; } // If collapsed, remove padding and margin @if $collapse and $minify == false { padding-left : 0; padding-right : 0; margin-#{$default-opposite} : 0; } // If collapsed and no column-number given, remove margin between grid @if $collapse and $columns == false and $minify == true { margin-#{$default-opposite} : 0; } // If a column number is given, calculate width @if $columns { @if $minify == false { position : relative; } // If collapsed, recalculate the width @if $collapse { width : gridCalc($columns, $collapse: true); } // Else, reduce the width with the margin @else { width : gridCalc($columns) - gridMarginCalc(); @if $minify == false { margin-#{$default-opposite} : gridMarginCalc(); // If last-column specified explicitly @if $last-column { margin-#{$default-opposite} : 0; } @else { &:last-child { margin-#{$default-opposite} : 0; } } } } } // If offset, calculate appropriate margins @if $offset { margin-#{$default-float}: gridCalc($offset, $collapse:$collapse); } // Source Ordering, adds left/right depending on which you use. @if $push { @if $minify == false { position : relative; } #{$default-float} : gridCalc($push, $collapse: $collapse); #{$default-opposite} : auto; } @if $pull { @if $minify == false { position : relative; } #{$default-opposite} : gridCalc($pull, $collapse: $collapse); #{$default-float} : auto; } // If centered, get rid of float and add appropriate margins @if $center { margin-left : auto !important; margin-right : auto !important; float : none !important; } @if $float { @if $float == left or true { float : $default-float; } @else if $float == right { float : $default-opposite; } @else { float : none; } } } @if $include-grid { /* --------------- EDGE Grid --------------- */ body { &.not-responsive { min-width : $row-width; } &.only-responsive-below-small { min-width : $row-width; @include small { min-width : 0; } } } // For `normal-row` .row { @include grid-row; .column, .columns { @include grid-column($columns: false, $minify: true); &.last { margin-#{$default-opposite} : 0 !important; } } // Width for `normal-row` @for $i from 1 through $total-columns { .large-#{$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $minify: true ); } } // For `collapsed-row` &.collapse { .column, .columns { @include grid-column($collapse: true); } // For `nested-row inside collapsed-row`, it's automatically collapsed .row { @include grid-row($behavior: nest-in-collapse, $minify: true); .column, .columns { @include grid-column($columns: false, $collapse: true, $minify: true); } } @for $i from 1 through $total-columns { .large-#{$i} { @include grid-column($columns:$i, $collapse:true, $float:false, $minify: true ); } } } // For `nested-row` .row { @include grid-row($behavior: nest, $minify: true); } // Offset for large columns @for $i from 1 through $total-columns - 2 { .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null, $float:false ); } } } .column.large-centered, .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false ); } // Push and pull for large-columns @for $i from 2 through $total-columns - 2 { .row { .push-#{$i} { @include grid-column($push:$i, $collapse:false, $float:false, $minify:true ); } .pull-#{$i} { @include grid-column($pull:$i, $collapse:false, $float:false, $minify:true ); } &.collapse { .push-#{$i} { @include grid-column($push:$i, $collapse:true, $float:false, $minify:true ); } .pull-#{$i} { @include grid-column($pull:$i, $collapse:true, $float:false, $minify:true ); } } } } @include medium-up { @for $i from 2 through $total-columns - 2 { .small-push-#{$i} { left: inherit; } .small-pull-#{$i} { right: inherit; } } } @include small { // Set all `large` columns to 100% .row .column, .row .columns, .row.collapse .column, .row.collapse .columns { @include grid-column($columns: $total-columns, $minify: true); // Reset push and pull &[class*="push"], &[class*="pull"] { left : auto; right : auto; } } // Reset large-offset .row { [class*="large-offset"] { margin-left : 0; } } // Small columns @for $i from 1 through $total-columns { .row .small-#{$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $minify: true ); } } // Small offset @for $i from 1 through $total-columns - 2 { .row { .small-offset-#{$i}, &.collapse .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null, $float:false ); } } } .column.small-centered, .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false ); } } }