Geek asks and answers

Can you install middle columns on Zurb Foundation 4?

NB: this was asked about, but did not answer: How to use breakpoints in Zurb Foundation 4?

The small and large 4-based tables are really convenient, but small is activated, perhaps a little earlier than I would like - is there a way to set the middle column parameter for small but not tiny resolutions, for example 800 * 600?

In my specific case, I need 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>
+3
source share
5 answers

Foundation 5, , , medium-12 columns ..

0

Zurb Foundation 4 . @import .

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

  }

}

, .

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

+7

Foundation 4 , , Sass CSS grid-5, .

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

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

+5

Starting with version 4.3, Foundation has a (experimental) medium grid! You can find their breakpoints and information on how to activate it in your Foundation 4.3 blog post : Pave the way to 5 .

+2
source 
<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 have not tried it yet, but in the next few days I will try, and I will come up with more detailed information.

0
source

More articles:


All Articles