How do I make use of breakpoints in Zurb foundation 4?

Question

I would like to have 3 breakpoints. Broadly speaking, I want to configure my grid for small, medium and large panes.

Looking at the docs for foundations grid, example classnames are provided for "small" and "large".

However, I suspect foundation can be more flexible then that. So I looked at the file _foundation-global.scss. Sure enough, it seems to have maths function and variables for a range of pane sizes.

In the docs for grid, I can see classnames like 'small-12' and 'large-3'.

Ideally I'd like to do something like 'medium-3'. Can I do anything like this with foundation's grid? If so, how?

Answer 1

In Zurb Foundation 4 I have added medium to my grid columns with the following. Just add this after the @import of your foundation globals and grid.

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

  }

}

Now you can use medium like you do the small and large grid.

https://gist.github.com/poeticninja/5985220

Answer 2

A new experimental feature for medium grid and this is the CSS file