Skip to content

Instantly share code, notes, and snippets.

@benlwilliams
Last active December 25, 2015 21:59

Revisions

  1. benlwilliams revised this gist Dec 12, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Breakpoint Layout helpers for Zurb Foundation
    Original file line number Diff line number Diff line change
    @@ -40,7 +40,7 @@
    .row.small-table { display:table; }
    [class*="column"].small-table-cell,
    [class*="column"] + .small-table-cell[class*="column"]:last-child,
    .small-table-cell[class*="large-"]:not(.large-0) {
    [class*="column"].small-table-cell[class*="large-"]:not(.large-0) {
    display:table-cell;
    float:none;
    vertical-align:middle;
    @@ -56,7 +56,7 @@
    .row.medium-table { display:table; }
    [class*="column"].medium-table-cell,
    [class*="column"] + .medium-table-cell[class*="column"]:last-child,
    .medium-table-cell[class*="large-"]:not(.large-0) {
    [class*="column"].medium-table-cell[class*="large-"]:not(.large-0) {
    display:table-cell;
    vertical-align:middle;
    float:none;
    @@ -73,7 +73,7 @@
    .row.large-table { display:table; }
    [class*="column"].large-table-cell,
    [class*="column"] + .large-table-cell[class*="column"]:last-child,
    .large-table-cell[class*="large-"]:not(.large-0) {
    [class*="column"].large-table-cell[class*="large-"]:not(.large-0) {
    display:table-cell;
    vertical-align:middle;
    float:none;
  2. benlwilliams revised this gist Dec 11, 2013. 1 changed file with 30 additions and 30 deletions.
    60 changes: 30 additions & 30 deletions Breakpoint Layout helpers for Zurb Foundation
    Original file line number Diff line number Diff line change
    @@ -89,35 +89,35 @@
    //

    /* Foundation Block Grids for above small breakpoint */
    @media #{$small} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
    .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @media #{$small} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
    .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
    .large-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }

    @for $i from 1 through $block-grid-elements {
    .medium-block-grid-#{($i)} {
    @include block-grid($i,$block-grid-default-spacing,false);
    }
    }
    }

    /* Foundation Block Grids for above medium breakpoint */
    @media #{$medium} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
    .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    .large-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }

    @for $i from 1 through $block-grid-elements {
    .medium-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }

    @for $i from 1 through $block-grid-elements {
    .large-block-grid-#{($i)} {
    @include block-grid($i,$block-grid-default-spacing,false);
    }
    }
    }
    .medium-block-grid-#{($i)} {
    @include block-grid($i,$block-grid-default-spacing,false);
    }
    }
    }

    /* Foundation Block Grids for above medium breakpoint */
    @media #{$medium} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
    .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
    .medium-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }

    @for $i from 1 through $block-grid-elements {
    .large-block-grid-#{($i)} {
    @include block-grid($i,$block-grid-default-spacing,false);
    }
    }
    }
  3. benlwilliams revised this gist Dec 11, 2013. 1 changed file with 114 additions and 14 deletions.
    128 changes: 114 additions & 14 deletions Breakpoint Layout helpers for Zurb Foundation
    Original file line number Diff line number Diff line change
    @@ -1,23 +1,123 @@
    //
    // Breakpoint Layout options
    // Responsive Floats
    //
    .small-float-right { float:right; }
    .small-float-left { float:left; }
    .small-float-reset { float:none; }
    .small-clear-left { clear:left; }
    .small-clear-right { clear:right; }
    .small-clear-both { clear:both; }
    .small-clear-reset { clear:none; }

    @media #{$small} {
    .medium-float-right { float:right; }
    .medium-float-left { float:left; }
    .medium-float-reset { float:none; }
    .medium-clear-left { clear:left; }
    .medium-clear-right { clear:right; }
    .medium-clear-both { clear:both; }
    .medium-clear-reset { clear:none; }
    }

    @media #{$medium} {
    .large-float-right { float:right; }
    .large-float-left { float:left; }
    .large-float-reset { float:none; }
    .large-clear-left { clear:left; }
    .large-clear-right { clear:right; }
    .large-clear-both { clear:both; }
    .large-clear-reset { clear:none; }
    }



    //
    // Foundation Grid Enhancements
    //
    .clear-reset { clear:none; }
    .small-0 { display:none; }

    // Table-cell the coluns so that you can use vertical-align values.
    .row.small-table { display:table; }
    [class*="column"].small-table-cell,
    [class*="column"] + .small-table-cell[class*="column"]:last-child,
    .small-table-cell[class*="large-"]:not(.large-0) {
    display:table-cell;
    float:none;
    vertical-align:middle;

    &.vert-top { vertical-align:top; }
    &.vert-bottom { vertical-align:bottom; }
    }

    @media #{$small} {
    .medium-left { float:left !important; }
    .medium-right { float:right !important; }
    .medium-clear { clear:both !important; }
    .medium-clear-reset { clear:none !important; }
    .medium-0 { display:none; }
    [class*="medium-"]:not(.medium-0) { display:block; }
    [class*="column"].medium-0 { display:none; }
    [class*="column"][class*="medium-"]:not(.medium-0) { display:block; }

    .row.medium-table { display:table; }
    [class*="column"].medium-table-cell,
    [class*="column"] + .medium-table-cell[class*="column"]:last-child,
    .medium-table-cell[class*="large-"]:not(.large-0) {
    display:table-cell;
    vertical-align:middle;
    float:none;

    &.vert-top { vertical-align:top; }
    &.vert-bottom { vertical-align:bottom; }
    }
    }

    @media #{$medium} {
    .large-left { float:left !important; }
    .large-right { float:right !important; }
    .large-clear { clear:both !important; }
    .large-clear-reset { clear:none !important; }
    .large-0 { display:none; }
    [class*="large-"]:not(.large-0) { display:block; }
    [class*="column"].large-0 { display:none; }
    [class*="column"][class*="large-"]:not(.large-0) { display:block; }

    .row.large-table { display:table; }
    [class*="column"].large-table-cell,
    [class*="column"] + .large-table-cell[class*="column"]:last-child,
    .large-table-cell[class*="large-"]:not(.large-0) {
    display:table-cell;
    vertical-align:middle;
    float:none;

    &.vert-top { vertical-align:top; }
    &.vert-bottom { vertical-align:bottom; }
    }
    }


    //
    // Medium Block Grid Support added. Missing with Foundation 4.
    //

    /* Foundation Block Grids for above small breakpoint */
    @media #{$small} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
    .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
    .large-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }

    @for $i from 1 through $block-grid-elements {
    .medium-block-grid-#{($i)} {
    @include block-grid($i,$block-grid-default-spacing,false);
    }
    }
    }

    /* Foundation Block Grids for above medium breakpoint */
    @media #{$medium} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
    .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
    .medium-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }

    @for $i from 1 through $block-grid-elements {
    .large-block-grid-#{($i)} {
    @include block-grid($i,$block-grid-default-spacing,false);
    }
    }
    }
  4. benlwilliams renamed this gist Oct 18, 2013. 1 changed file with 0 additions and 0 deletions.
  5. benlwilliams renamed this gist Oct 18, 2013. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  6. benlwilliams created this gist Oct 18, 2013.
    23 changes: 23 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    //
    // Breakpoint Layout options
    //
    .clear-reset { clear:none; }
    .small-0 { display:none; }

    @media #{$small} {
    .medium-left { float:left !important; }
    .medium-right { float:right !important; }
    .medium-clear { clear:both !important; }
    .medium-clear-reset { clear:none !important; }
    .medium-0 { display:none; }
    [class*="medium-"]:not(.medium-0) { display:block; }
    }

    @media #{$medium} {
    .large-left { float:left !important; }
    .large-right { float:right !important; }
    .large-clear { clear:both !important; }
    .large-clear-reset { clear:none !important; }
    .large-0 { display:none; }
    [class*="large-"]:not(.large-0) { display:block; }
    }