Skip to content

Instantly share code, notes, and snippets.

@replete

replete/_lt-ie9-foundation-grid.scss

Last active May 26, 2017 07:34
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. replete revised this gist Oct 21, 2013. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion _lt-ie9-foundation-grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,11 +3,15 @@
    IE78 - Zurb Foundation 4 Grid
    ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
    https://gist.github.com/willwashburn/5157451
    https://gist.github.com/replete/7082477
    (an enhanced fork of https://gist.github.com/zurbchris/5068210 )
    1) Make sure $row-width-px = your max large breakpoint row width (e.g. 960px)
    2) Make sure $small-screen-px = your minimum large breakpoint row width (e.g. 768px)
    3) IE7 will need box-sizing polyfill, see my fix here: https://gist.github.com/replete/7082518
    -@replete
    ˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/

  2. replete created this gist Oct 21, 2013.
    293 changes: 293 additions & 0 deletions _lt-ie9-foundation-grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,293 @@
    @charset "UTF-8";
    /*---------------------------------------------------------------
    IE78 - Zurb Foundation 4 Grid
    ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
    https://gist.github.com/willwashburn/5157451
    (an enhanced fork of https://gist.github.com/zurbchris/5068210 )
    1) Make sure $row-width-px = your max large breakpoint row width (e.g. 960px)
    2) Make sure $small-screen-px = your minimum large breakpoint row width (e.g. 768px)
    ˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/


    /* The Grid ---------------------- */
    $half-gutter-px: $column-gutter-px / 2;
    .row { width: $row-width-px; max-width: 100%; min-width: $small-screen-px; margin: 0 auto; }
    .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -$half-gutter-px; }
    .row.large-collapse .column,
    .row.large-collapse .columns { padding: 0; }
    .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -$half-gutter-px; }
    .row .row.large-collapse { margin: 0; }

    .column,
    .columns { float: left; min-height: 1px; padding: 0 $half-gutter-px; position: relative; }
    .column.large-centered,
    .columns.large-centered { float: none; margin: 0 auto; }

    [class*="column"] + [class*="column"]:last-child { float: right; }
    [class*="column"] + [class*="column"].end { float: left; }



    $i: 1;
    @while $i < $total-columns + 1 {

    .large-#{$i},
    .row .large-#{$i} {
    width: ($i/$total-columns)*100%;
    }

    .row .large-offset-#{$i} {
    margin-left: ($i/$total-columns)*100%;
    }

    $i: $i + 1;
    }


    $j: 2;
    @while $j < $total-columns + 1 {

    .pull-#{$j} {
    right: ($j/$total-columns)*100%;
    }

    .push-#{$j} {
    left: ($j/$total-columns)*100%;
    }

    $j: $j + 1;
    }
    /* Nicolas Gallagher's micro clearfix */
    .row { *zoom: 1; }
    .row:before,
    .row:after { content: " "; display: table; }
    .row:after { clear: both; }



    [class*=large-block-grid-] {
    margin-left:-$half-gutter-px;
    margin-right:-$half-gutter-px;
    }

    /* LARGE Block Grids */
    .large-block-grid-2 {
    list-style: none
    }

    .large-block-grid-2 > li {
    float: left;
    width: 50%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-2 > li:first-child+li {
    float: right
    }

    .large-block-grid-2 > li:first-child+li+li {
    clear: both
    }

    .large-block-grid-3 {
    list-style: none
    }

    .large-block-grid-3 > li {
    float: left;
    width: 33.3333%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-3 > li:first-child+li+li {
    float: right
    }

    .large-block-grid-3 > li:first-child+li+li+li {
    clear: both
    }

    .large-block-grid-4 {
    list-style: none
    }

    .large-block-grid-4 > li {
    float: left;
    width: 25%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-4 > li:first-child+li+li+li {
    float: right
    }

    .large-block-grid-4 > li:first-child+li+li+li+li {
    clear: both
    }

    .large-block-grid-5 {
    list-style: none
    }

    .large-block-grid-5 > li {
    float: left;
    width: 20%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-5 > li:first-child+li+li+li+li {
    float: right
    }

    .large-block-grid-5 > li:first-child+li+li+li+li+li {
    clear: both
    }

    .large-block-grid-6 {
    list-style: none
    }

    .large-block-grid-6 > li {
    float: left;
    width: 16.6667%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-6 > li:first-child+li+li+li+li+li {
    float: right
    }

    .large-block-grid-6 > li:first-child+li+li+li+li+li+li {
    clear: both
    }

    .large-block-grid-7 {
    list-style: none
    }

    .large-block-grid-7 > li {
    float: left;
    width: 14.2857142%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-7 > li:first-child+li+li+li+li+li+li {
    float: right
    }

    .large-block-grid-7 > li:first-child+li+li+li+li+li+li+li {
    clear: both
    }

    .large-block-grid-8 {
    list-style: none
    }

    .large-block-grid-8 > li {
    float: left;
    width: 12.5%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-8 > li:first-child+li+li+li+li+li+li+li {
    float: right
    }

    .large-block-grid-8 > li:first-child+li+li+li+li+li+li+li+li {
    clear: both
    }

    .large-block-grid-9 {
    list-style: none
    }

    .large-block-grid-9 > li {
    float: left;
    width: 11.111111%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-9 > li:first-child+li+li+li+li+li+li+li+li {
    float: right
    }

    .large-block-grid-9 > li:first-child+li+li+li+li+li+li+li+li+li {
    clear: both
    }

    .large-block-grid-10 {
    list-style: none
    }

    .large-block-grid-10 > li {
    float: left;
    width: 10%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-10 > li:first-child+li+li+li+li+li+li+li+li+li {
    float: right
    }

    .large-block-grid-10 > li:first-child+li+li+li+li+li+li+li+li+li+li {
    clear: both
    }

    .large-block-grid-11 {
    list-style: none
    }

    .large-block-grid-11 > li {
    float: left;
    width: 9.0909%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-11 > li:first-child+li+li+li+li+li+li+li+li+li+li {
    float: right
    }

    .large-block-grid-11 > li:first-child+li+li+li+li+li+li+li+li+li+li+li {
    clear: both
    }

    .large-block-grid-12 {
    list-style: none
    }

    .large-block-grid-12 > li {
    float: left;
    width: 8.333333%;
    padding: 0 $half-gutter-px $half-gutter-px;
    }

    .large-block-grid-12 > li:first-child+li+li+li+li+li+li+li+li+li+li+li {
    float: right
    }

    .large-block-grid-12 > li:first-child+li+li+li+li+li+li+li+li+li+li+li+li {
    clear: both
    }

    //TODO: Implement above static CSS into sass function, in order to spit out total-columns

    // $k: 2;
    // @while $k < $total-columns + 1 {

    // .large-block-grid-#{$k} {
    // list-style:none;
    // }

    // .large-block-grid-#{$k} {
    // list-style:none;
    // }

    // .push-#{$k} {
    // left: ($k/$total-columns)*100%;
    // }

    // $k: $k + 1;
    // }