Can you set medium columns on Zurb Foundation 4?

问题:

NB: This has been asked but not really answered here: How do I make use of breakpoints in Zurb foundation 4?

The small and large columns on Foundation 4 are really handy, but small activates perhaps a little earlier than I'd like - is there any way of setting a medium-columns setting for smallish but not tiny resolutions, e.g. 800 * 600?

In my specific case, I'd like the following setup:

 <div class="small-12 medium-6 large-4 columns">First column</div>
 <div class="small-12 medium-6 large-8 columns">Second column</div>

回答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

回答2:

With Foundation 4, all you need to do is include the grid-5 Sass or CSS file to enable a medium grid.

@import "foundation/components/grid-5";

http://foundation.zurb.com/docs/components/grid.html#medium-grid

回答3:

Since version 4.3, Foundation has an (experimental) Medium Grid! You can find their breakpoints and details about how to activate it in their blog post Foundation 4.3: Paving the Road to 5.

回答4:

<div class='row'>
    <div id='foo' class='large-4 medium-6 small-12 columns'>        
    </div>
</div> 

scss

@mixin respond-to($media) {
  @if $media == small-mode {
    @media only screen and (max-width: 420px) { @content }
  }
  @else if $media == medium-mode {
    @media only screen and (max-width: 768px) { @content }
  }
  @else if $media == large-mode {
    @media only screen and (max-width: 980px) { @content }
    }
  }
}

http://adioso.com/blog/

i didn't tried it yet but in the next few days i will try it and i will came up with more details

回答5:

Since Foundation has transitioned to version 5, there is now simply a medium grid, which you can access using medium-12 columns etc.