Using Foundation’s Block Grid Mixin within the Bootstrap CSS Framework (Updated)

Apr 28, 2015 12:32 · 366 words · 2 minute read css

Here’s an adaption of Zurb Foundation’s handy Block Grid Mixin adapted to the LESS preprocessor in order to use it within Bootstrap.

Update

I’ve added a mixin that supports a shorthand syntax that enables you to simply create a block grid writing something like .make-block-grid(1,2,4,8);

// # Block Grid Mixin
//
// Technique adapted from Foundation 5 for Bootstrap 3
//
// # Example Usage
//
// To produce a grid of 2 items per row on an extra-small screen, 3 items
// on a small screen, 4 items on a medium screen and 6 items per row on large screen:
//
// ul.gallery {
//   .make-block-grid-container();
//   > li {
//     .make-xs-block-grid(2);
//     .make-sm-block-grid(3);
//     .make-md-block-grid(4);
//     .make-lg-block-grid(6);
//   }
// }

// Or, in a quicker way with the shorthand syntax:
//   ul.gallery {
//     .make-block-grid(2,3,4,6)
//   }

//Mixins for Block Grids
.make-block-grid-container (@spacing: @grid-gutter-width) {
  list-style: none;
  padding: 0;
  margin-left: (@spacing / -2);
  margin-right: (@spacing / -2);
  &:extend(.clearfix all);
  > * {
    margin-bottom: @spacing;
  }
  > li {
    &:before {
      content: none !important;
    }
  }
}
.make-xs-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  float: left;
  width: percentage(1 / @blocks);
  &:nth-of-type(1n) { clear: none; }
  &:nth-of-type(@{blocks}n+1) { clear: both; }
}
.make-sm-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}
.make-md-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}
.make-lg-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}

// Make one mixin for all sizes so we don't have to call 4 mixins every time we use block grids
.make-block-grid (@cols-xs, @cols-sm, @cols-md, @cols-lg) {
  .make-block-grid-container();
  >li {
    .make-xs-block-grid(@cols-xs);
    .make-sm-block-grid(@cols-sm);
    .make-md-block-grid(@cols-md);
    .make-lg-block-grid(@cols-lg);
  }
}