Geek asks and answers

How to use breakpoints in Zurb Foundation 4?

I would like to have 3 breakpoints. In general, I want to customize my grid for small, medium and large panels.

Looking at documents for a foundation grid, class classes are provided for the "small" and "large" classes.

However, I suspect that the fund may be more flexible than that. So I looked at the _foundation-global.scss file. Of course, it has a math function and variables for a range of panel sizes.

In the documents for grid, I can see class names such as "small-12" and "large-3".

Ideally, I would like to do something like "medium-3." Can I do something similar with a foundation grid? If so, how?

+5
source share
6

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

+2

, CSS

+1

.

CSS. CSS . , , , , . .

- SASS. CSS. SASS .

, SASS.

SASS- Foundation -, - , .

-, . . , Foundation , .

, Foundation - . Singularity Breakpoint Slicer - , , StackOverflow.

0

, , lolmaus Foundation ( - ).

, CSS- , Foundation 3 ( , ), → → , . ( , , F4 .)

, ( Bootstrap, , ), HTML5/CSS3, Foundation.

, F3 1200 , 1199-768 767 ( ).

0

768 , /. , hide-for-small show-for-small.

, -, , , , . , "" (, ) "" () , CSS.

, F3, 768px, -, , (, , CSS , , , , 900px 1050px 1150px). , , .

lolmaus , Foundation - . , , Foundation - , , .

You can also add an additional (e.g. tablet / table) breakpoint without any problems, but this will require some work. However, I would suggest you try Foundation and ask yourself if you really need 3 different sets of styles, not 2. I created responsive websites targeted at the desktop / tablet / mobile triad, and to be honest, I never looked back ago I started using the Foundation about six months ago.

0
source

More articles:


All Articles