Here is how to add Medium to the Zurb Foundation 4 CSS framework. This makes the grid change on any html with the medium-$ class. Great for iPad and more custom sizing of website. Make sure you add this after the @import "foundation/components/global", "foundation/components/grid";.

gistfile1.txt

@if $include-html-grid-classes != false {

  /* Styles for screens that are atleast 768px and max width 1024px */
  @media #{$small} and (max-width: 1024px) {

    @for $i from 1 through $total-columns {
      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .row .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 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); }
    }

    .column.medium-centered,
    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.medium-uncentered,
    .columns.medium-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

    .column.medium-uncentered.opposite,
    .columns.medium-uncentered.opposite {
      float: $opposite-direction !important;
    }

  }

}

Huh? Where do we put this? I am using the Reverie framework for WordPress. I looked through the files and I can't imagine where this goes. Can't we just add the CSS file?

@jkinley checkout the new experimental feature for medium grid and this is the CSS file

This is what I was looking for! The link in the Zurb docs no longer works. Where do I put this if I use regular and <script src="> for linking in foundation 4 to my html-page? What file are you pasting this in?

This is what I was looking for! The link in the Zurb docs no longer works. Where do I put this if I use regular link rel and script src for linking in foundation 4 to my html-page? What file are you pasting this in?