Skip to content

Instantly share code, notes, and snippets.

@ChrisTM

ChrisTM/block-grid.less

Last active August 25, 2022 19:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ChrisTM/8346916 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ChrisTM/8346916 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ChrisTM revised this gist Dec 6, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions block-grid.less
    View file
    Original file line number Diff line number Diff line change
    @@ -45,10 +45,10 @@
    // per row down to 1 many items per row.
    .block-grids(@size, @per-row: @grid-columns) when (@per-row > 0) {
    .block-grid-@{size}-@{per-row} { .block-grid(@per-row); }
    .block-grids((@per-row - 1), @class, @type);
    .block-grids(@size, (@per-row - 1));
    }

    .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) }
    @media (min-width: @screen-lg-min) { .block-grids(lg) }
  2. ChrisTM revised this gist Dec 6, 2014. 1 changed file with 22 additions and 17 deletions.
    39 changes: 22 additions & 17 deletions block-grid.less
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,18 @@
    // Block Grid
    // Technique adapted from Foundation 5 for Bootstrap 3.
    // # Block Grid
    //
    // Technique adapted from Foundation 5 for Bootstrap 3.0.3 to at least 3.3.1.
    // https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
    //
    // # Example Usage
    //
    // To produce a grid of 2 items per row on an extra-small screen, and 3 items
    // per row on a small screen:
    //
    // <div class="block-grid-xs-2 block-grid-sm-3">
    // <div class="block-grid-item">
    // ...
    // </div>
    // </div>

    [class*="block-grid-"] {
    display: block;
    @@ -15,7 +27,8 @@
    padding: (@grid-gutter-width/2);
    height: auto;
    float: left;
    list-style: none;
    width: 100%;
    list-style: none; // for those who like to use `li` elements as block-grid-items
    }

    .block-grid (@per-row) {
    @@ -28,22 +41,14 @@
    }
    }

    .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); }
    // Recursive loop that produces rules for block grids of @per-row many items
    // per row down to 1 many items per row.
    .block-grids(@size, @per-row: @grid-columns) when (@per-row > 0) {
    .block-grid-@{size}-@{per-row} { .block-grid(@per-row); }
    .block-grids((@per-row - 1), @class, @type);
    }

    .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) }
    @media (min-width: @screen-lg-min) { .block-grids(lg) }
  3. ChrisTM revised this gist Jan 29, 2014. 1 changed file with 10 additions and 9 deletions.
    19 changes: 10 additions & 9 deletions block-grid.less
    View file
    Original file line number Diff line number Diff line change
    @@ -4,22 +4,23 @@

    [class*="block-grid-"] {
    display: block;
    margin: -(@grid-gutter-width/2);
    padding: 0;
    .clearfix();
    }

    & > li {
    display: inline;
    height: auto;
    float: left;
    padding: 0 (@grid-gutter-width/2) @grid-gutter-width;
    }
    .block-grid-item {
    display: inline;
    margin: 0;
    padding: (@grid-gutter-width/2);
    height: auto;
    float: left;
    list-style: none;
    }

    .block-grid (@per-row) {
    & > li {
    & > .block-grid-item {
    width: (100%/@per-row);
    padding: 0 (@grid-gutter-width/2) @grid-gutter-width;
    list-style: none;

    @nth-equation: ~"@{per-row}n+1";
    &:nth-of-type(n) { clear: none; }
  4. ChrisTM renamed this gist Jan 10, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → block-grid.less
    View file
    File renamed without changes.
  5. ChrisTM created this gist Jan 10, 2014.
    48 changes: 48 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    // Block Grid
    // Technique adapted from Foundation 5 for Bootstrap 3.
    // https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss

    [class*="block-grid-"] {
    display: block;
    padding: 0;
    .clearfix();

    & > li {
    display: inline;
    height: auto;
    float: left;
    padding: 0 (@grid-gutter-width/2) @grid-gutter-width;
    }
    }

    .block-grid (@per-row) {
    & > li {
    width: (100%/@per-row);
    padding: 0 (@grid-gutter-width/2) @grid-gutter-width;
    list-style: none;

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