Skip to content

Instantly share code, notes, and snippets.

@Jursdotme
Last active January 21, 2021 17:03
Show Gist options
  • Save Jursdotme/67abe379d4a357233d3c to your computer and use it in GitHub Desktop.
Save Jursdotme/67abe379d4a357233d3c to your computer and use it in GitHub Desktop.
Foundation 5 style Block-Grid for Bootstrap 3 (SASS Version)
// Block Grid
// Technique adapted from Foundation 5 for Bootstrap 3.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
// Original LESS Version by Christopher Mitchell (https://gist.github.com/ChrisTM)
// Converted to SCSS by Rasmus Jürs (https://github.com/Jursdotme)
[class*="block-grid-"] {
display: block;
margin: -($grid-gutter-width/2);
padding: 0;
@include clearfix();
}
.block-grid-item {
display: inline;
margin: 0;
padding: ($grid-gutter-width/2);
height: auto;
float: left;
list-style: none;
}
@mixin block-grid ($per-row) {
& > .block-grid-item {
width: (100%/$per-row);
$nth-equation: #{$per-row}n+'+'+1;
&:nth-of-type(n) { clear: none; }
&:nth-of-type(#{$nth-equation}) { clear: both; }
}
}
@mixin block-grids($size) {
.block-grid-#{$size}-1 { @include block-grid(1); }
.block-grid-#{$size}-2 { @include block-grid(2); }
.block-grid-#{$size}-3 { @include block-grid(3); }
.block-grid-#{$size}-4 { @include block-grid(4); }
.block-grid-#{$size}-5 { @include block-grid(5); }
.block-grid-#{$size}-6 { @include block-grid(6); }
.block-grid-#{$size}-7 { @include block-grid(7); }
.block-grid-#{$size}-8 { @include block-grid(8); }
.block-grid-#{$size}-9 { @include block-grid(9); }
.block-grid-#{$size}-10 { @include block-grid(10); }
.block-grid-#{$size}-11 { @include block-grid(11); }
.block-grid-#{$size}-12 { @include block-grid(12); }
}
@include block-grids(xs);
@media (min-width: $screen-sm-min) { @include block-grids(sm) }
@media (min-width: $screen-md-min) { @include block-grids(md) }
@media (min-width: $screen-lg-min) { @include block-grids(lg) }
@tnormington
Copy link

Is this no longer working with the current version of Bootstrap?

@realart
Copy link

realart commented Sep 5, 2015

When I had a DIV with pagination below block grid container, and I used "text-center" text align class, my pagination links sometimes aligned too much to the right and not in center.

This was because the negative margin of last row block grid items somehow collapsed into the pagination div and affected text align calculation. Despite the fact that block grid container has "clearfix".

To get rid of this problem, I had to wrap blockgrid into another div and give it clearfix class as well.

@mheywood90
Copy link

This was not working with the current version of bootstrap and seemed to be a similar error read here:
alexwolfe/Buttons#64

wrapping the $nth-equation in parentheses seemed to fix the issue for me:
$nth-equation: (#{$per-row}n) + '+' +1;

@JohnnyTheTank
Copy link

@jpcmf
Copy link

jpcmf commented Dec 14, 2015

Stylus Version

[class*="block-grid-"]
    display: block
    margin: -($grid-gutter-width / 2)
    padding: 0
    clearfix()

.block-grid-item
    display: inline
    margin: 0
    padding: ($grid-gutter-width / 2)
    height: auto
    float: left
    list-style: none

block-grid($per-row)
    & > .block-grid-item
        width: (100% / $per-row)

        $nth-equation : (#{$per-row}n) + "+" + 1
        &:nth-of-type(n)
            clear: none
        &:nth-of-type({$nth-equation})
            clear: both

block-grids($size)
    .block-grid-{$size}-1
        block-grid(1)
    .block-grid-{$size}-2
        block-grid(2)
    .block-grid-{$size}-3
        block-grid(3)
    .block-grid-{$size}-4
        block-grid(4)
    .block-grid-{$size}-5
        block-grid(5)
    .block-grid-{$size}-6
        block-grid(6)
    .block-grid-{$size}-7
        block-grid(7)
    .block-grid-{$size}-8
        block-grid(8)
    .block-grid-{$size}-9
        block-grid(9)
    .block-grid-{$size}-10
        block-grid(10)
    .block-grid-{$size}-11
        block-grid(11)
    .block-grid-{$size}-12
        block-grid(12)

block-grids(xs)
@media (min-width: $screen-sm-min)
    block-grids(sm)
@media (min-width: $screen-md-min)
    block-grids(md)
@media (min-width: $screen-lg-min)
    block-grids(lg)

@johnkodes
Copy link

Libsass will not compile the CSS correctly.

Use $nth-equation : (#{$per-row}n) + '+' + 1 instead of $nth-equation: #{$per-row}n+'+'+1; as mheywood90 pointed out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment