Skip to content

Instantly share code, notes, and snippets.

@mikestecker

mikestecker/block-grid.scss

Forked from Jursdotme/block-grid.scss
Last active August 29, 2015 14:15
Show Gist options
  • Save mikestecker/bbe1d06e4a67b7bde544 to your computer and use it in GitHub Desktop.
Save mikestecker/bbe1d06e4a67b7bde544 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @Jursdotme Jursdotme revised this gist Jun 18, 2014. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions block-grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,9 @@
    @import "bootstrap";

    // 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);
  2. @Jursdotme Jursdotme revised this gist Jun 18, 2014. 1 changed file with 2 additions and 6 deletions.
    8 changes: 2 additions & 6 deletions block-grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,4 @@
    // 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)
    @import "bootstrap";

    [class*="block-grid-"] {
    display: block;
    @@ -24,7 +20,7 @@
    & > .block-grid-item {
    width: (100%/$per-row);

    $nth-equation: #{$per-row}n+1;
    $nth-equation: #{$per-row}n+'+'+1;
    &:nth-of-type(n) { clear: none; }
    &:nth-of-type(#{$nth-equation}) { clear: both; }
    }
  3. @Jursdotme Jursdotme created this gist May 5, 2014.
    51 changes: 51 additions & 0 deletions block-grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    // 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) }