INSTRUCTIONS
Say we want to have a custom grid size that applies at $screen-sm-min
In _grid.scss find @media (min-width: $screen-sm-min) and add the following to the end:
// Custom Sizes @include calc-grid(8.5, sm, width); @include calc-grid(3.5, sm, width); @include make-grid-columns-float-custom(sm, "8r5"); @include make-grid-columns-float-custom(sm, "3r5");
This gives us a custom column size of 8.5 and 3.5
Notice the 8r5 and 3r5 in make-grid-columns-float-custom
If we had used 8.5 and 3.5 instead the class name would become .col-sm-8.5 which would represent an element
that contains both the class col-sm-8 and the seperate class 5.
To avoid this I went with the aforementioned format.
If you want a custom offset of 0.5 then you’d also add:
@include calc-grid(0.5, sm, offset);
_mixins.scss
Add these functions after @mixin make-grid-columns-float($class)
@mixin make-grid-columns-float-custom($class, $index) { $classname: ".col-" + $class + "-" + $index; #{$classname} { float: left; } } @function rmod($val1) { $frac: $val1 - floor($val1); // discard int $return: 0; $tmp: 0; // End result will be 0.0 @while $frac > 0 { $frac: $frac * 10; @if $frac > 1 { /* During the final loop $frac will end with .0 but reports 0.0 == 0.0 as false with this functions sequence of events (normally 0.0 == 0.0 returns true). The following @if statement is a workaround and 0.0 < 0 returns true which correctly terminates the loop. */ @if $frac - $frac*10 < 5 { $tmp: round($frac); } @else { $tmp: floor($frac); } } @else { $tmp: 0; } $return: $return * 10; @if $tmp != 0 { $return: $return + $tmp; $frac: $frac - $tmp; } } @return $return; }
Replace @mixin calc-grid($index, $class, $type) with the modified mixin:
@mixin calc-grid($index, $class, $type) { @if ($type == width) and ($index > 0) { $index_classname: $index; @if (floor($index) != $index) { $index_classname: floor($index) + "r" + rmod($index); } .col-#{$class}-#{$index_classname} { width: percentage(($index / $grid-columns)); } } @if ($type == push) { .col-#{$class}-push-#{$index} { left: percentage(($index / $grid-columns)); } } @if ($type == pull) { .col-#{$class}-pull-#{$index} { right: percentage(($index / $grid-columns)); } } @if ($type == offset) { $index_classname: $index; @if (floor($index) != $index) { $index_classname: floor($index) + "r" + rmod($index); } .col-#{$class}-offset-#{$index_classname} { margin-left: percentage(($index / $grid-columns)); } } }