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

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

Answer 2

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 3

Foundation comes in two flavors.

You're familiar with the non-semantic CSS version. It has a prebuilt CSS file with rules for all possible combinations of classes. Of course, they can't pre-fulfill all you needs simply because they are not telepaths. They have only made classes for two grid sizes.

The other flavor is the semantic SASS version. It does not make use of a prebuilt CSS file. With the SASS version, you create only the styles you need and apply them to the elements of your site semantically.

The bottom of this page describes how to do the grid with SASS.

With the SASS version of Foundation you have no preset media queries and you can set your own — as much as you need.

Foundation does not provide any tools for working with media queries, so you'll have to set them manually. It also lacks instruments for defining multiple grids. In order to have different grid setups for different screen sizes or different portions of your site, you'll have to redefine Foundation grid setting for each use, which is rather cumbersome.

Probably, Foundation is simply not the best tool for creating responsive grids. Instead, try Singularity with Breakpoint Slicer — these are created exactly for that purpose, have extensive documentation and decent support from developers right here on StackOverflow.

Answer 4

Foundation's fluid grid is built around a single breakpoint at 768px, so basically mobile and desktop/tablet. Everything revolves around this concept, which is why you have classes like hide-for-small and show-for-small.

Any additional breakpoints have to be done custom using media queries, however as Foundation is a fluid grid, that's not as irritating to implement as you might think. The idea is that the 'large' (e.g. desktop) version of your site should scale reasonably to a 'medium' (tablet) viewport without requiring too much extensive refactoring of CSS.

Most of the sites I build in F3 transform significantly at the 768px breakpoint, and then I write a few other media queries to tweak whatever is needed above that breakpoint (so usually I have a handful of CSS tweaks for a few more arbitrary breakpoints that depend on the design, but for example maybe 900px and 1050px on a site with a row width of 1150px). Tablets these days are pretty high resolution and tend to display desktop-styled layouts just fine in most cases.

lolmaus does have a point in that Foundation is not just a responsive grid tool. There are other lighter frameworks that provide a lot more granular and convenient ways to customize your grid sizes and behaviors, while Foundation is a whole front-end framework meant for rapid prototyping that is based around the single breakpoint concept.

You could also add a secondary (e.g. tablet / desktop) breakpoint without TOO much trouble but it would take some work. However, I would suggest you try Foundation out and ask yourself if you really need 3 distinct sets of styles rather than 2. I have built responsive sites aimed at the desktop/tablet/mobile triad before and honestly I never looked back for a second after I started using Foundation about six months ago.

Answer 5

Can you set medium columns on Zurb Foundation 4? http://adioso.com/blog/

Answer 6

Maybe I'm coming to the party late but I disagree with lolmaus's overall argument against Foundation (unless you really do need super duper grid granulation).

For someone who had been using his own, homegrown CSS grid system for years, I found Foundation 3 (the first version I tried) to be very good at letting me structure the site for desktop -> tablet -> phone responsively, all the while giving me control over graphics-intensive designs & layout. (And I think I just read that F4 has implemented small- and large-grid systems for different formats.)

I can't speak to any other system because I haven't tried them (except Bootstrap, which was more comprehensive than I needed), but if you're a hands-on designer with some good chops in HTML5/CSS3, you'll do just fine with Foundation.

If it helps, my breakpoint settings in F3 were 1200 or more, 1199-768, and 767 or less (browsing a site on a phone horizontally only).