Menu icon Foundation
Create New Grid?

If I want to create a new grid set what files and what part of the files would I have to change? I would like to create a xsmall grid targeting only screen max width of 320px.

I assume I would have to make changes to "global.scss" and "grid.scss"

global.scss code to change

// Media Query Ranges
$xsmall-range: (0em, 20em) !default; // added
$small-range: (20.063em, 40em) !default; // modified
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;


$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$xsmall-up: $screen !default; // added
$xsmall-only: "#{$screen} and (max-width: #{upper-bound($xsmall-range)})" !default; // added

$small-up: "#{$screen} and (min-width:#{lower-bound($small-range)})" !default; // modified
$small-only: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($small-range)})" !default; // modified

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

// Legacy
$small: $medium-up;
$medium: $medium-up;
$large: $large-up;
            

         

grid.scss code to change

@include exports("grid") {
  @if $include-html-grid-classes {
    .row {
      @include grid-row;

      &.collapse {
         > .column,
         > .columns { @include grid-column($collapse:true, $float:false); }

        .row {margin-left:0; margin-right:0;}
      }

      .row { @include grid-row($behavior:nest);
        &.collapse { @include grid-row($behavior:nest-collapse); }
      }
    }

    .column,
    .columns { @include grid-column($columns:$total-columns); }

    @media #{$xsmall-up} {
      @include grid-html-classes($size:xsmall);
    } // added

    @media #{$small-up} {
      @include grid-html-classes($size:small);
      // Old push and pull classes
      @for $i from 0 through $total-columns - 1 {
        .push-#{$i} {
          @include grid-column($push:$i, $collapse:null, $float:false);
        }
        .pull-#{$i} {
          @include grid-column($pull:$i, $collapse:null, $float:false);
        }
      }
    } // modified

    @media #{$medium-up} {
      @include grid-html-classes($size:medium);
      // Old push and pull classes
      @for $i from 0 through $total-columns - 1 {
        .push-#{$i} {
          @include grid-column($push:$i, $collapse:null, $float:false);
        }
        .pull-#{$i} {
          @include grid-column($pull:$i, $collapse:null, $float:false);
        }
      }
    }
    @media #{$large-up} {
      @include grid-html-classes($size:large);
      @for $i from 0 through $total-columns - 1 {
        .push-#{$i} {
          @include grid-column($push:$i, $collapse:null, $float:false);
        }
        .pull-#{$i} {
          @include grid-column($pull:$i, $collapse:null, $float:false);
        }
      }
    }
  }
  @if $include-xl-html-grid-classes {
    @media #{$xlarge-up} {
      @include grid-html-classes($size:xlarge);
    }
    @media #{$xxlarge-up} {
      @include grid-html-classes($size:xxlarge);
    }
  }
}
            

         

Would that be correct?

grid

If I want to create a new grid set what files and what part of the files would I have to change? I would like to create a xsmall grid targeting only screen max width of 320px.

I assume I would have to make changes to "global.scss" and "grid.scss"

global.scss code to change

// Media Query Ranges
$xsmall-range: (0em, 20em) !default; // added
$small-range: (20.063em, 40em) !default; // modified
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;


$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$xsmall-up: $screen !default; // added
$xsmall-only: "#{$screen} and (max-width: #{upper-bound($xsmall-range)})" !default; // added

$small-up: "#{$screen} and (min-width:#{lower-bound($small-range)})" !default; // modified
$small-only: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($small-range)})" !default; // modified

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

// Legacy
$small: $medium-up;
$medium: $medium-up;
$large: $large-up;
            

         

grid.scss code to change

@include exports("grid") {
  @if $include-html-grid-classes {
    .row {
      @include grid-row;

      &.collapse {
         > .column,
         > .columns { @include grid-column($collapse:true, $float:false); }

        .row {margin-left:0; margin-right:0;}
      }

      .row { @include grid-row($behavior:nest);
        &.collapse { @include grid-row($behavior:nest-collapse); }
      }
    }

    .column,
    .columns { @include grid-column($columns:$total-columns); }

    @media #{$xsmall-up} {
      @include grid-html-classes($size:xsmall);
    } // added

    @media #{$small-up} {
      @include grid-html-classes($size:small);
      // Old push and pull classes
      @for $i from 0 through $total-columns - 1 {
        .push-#{$i} {
          @include grid-column($push:$i, $collapse:null, $float:false);
        }
        .pull-#{$i} {
          @include grid-column($pull:$i, $collapse:null, $float:false);
        }
      }
    } // modified

    @media #{$medium-up} {
      @include grid-html-classes($size:medium);
      // Old push and pull classes
      @for $i from 0 through $total-columns - 1 {
        .push-#{$i} {
          @include grid-column($push:$i, $collapse:null, $float:false);
        }
        .pull-#{$i} {
          @include grid-column($pull:$i, $collapse:null, $float:false);
        }
      }
    }
    @media #{$large-up} {
      @include grid-html-classes($size:large);
      @for $i from 0 through $total-columns - 1 {
        .push-#{$i} {
          @include grid-column($push:$i, $collapse:null, $float:false);
        }
        .pull-#{$i} {
          @include grid-column($pull:$i, $collapse:null, $float:false);
        }
      }
    }
  }
  @if $include-xl-html-grid-classes {
    @media #{$xlarge-up} {
      @include grid-html-classes($size:xlarge);
    }
    @media #{$xxlarge-up} {
      @include grid-html-classes($size:xxlarge);
    }
  }
}
            

         

Would that be correct?

Loc over 5 years ago

Anyone? Foundation team?

Claudio Rimann over 5 years ago

First of all, the easiest solution i see would be to just adapt the small-range to your needs.

If you really need to have an extra xsmall-range PLUS all the other ranges, that should be possible, too.

But i would not change the core component files (would make future updates harder) but to just attach your style (copy/paste from the original _grids.scss component) in an additional scss file.

Never tried myself, but i think that should work.