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) }
@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