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);
}
}
One Comment