Foundation 5 and page printing

css, media-queries, sass, zurb-foundation

Solution

Here is the CSS for that:

@media print {
  .large-1 {
    width: 8.33333%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-3 {
    width: 25%;
  }

  .large-4 {
    width: 33.33333%;
  }

  .large-5 {
    width: 41.66667%;
  }

  .large-6 {
    width: 50%;
  }

  .large-7 {
    width: 58.33333%;
  }

  .large-8 {
    width: 66.66667%;
  }

  .large-9 {
    width: 75%;
  }

  .large-10 {
    width: 83.33333%;
  }

  .large-11 {
    width: 91.66667%;
  }

  .large-12 {
    width: 100%;
  }
}

Source: http://foundation.zurb.com/forum/posts/2820-printing-foundation-5

Problem

I'm using Zurb Foundation. I'm trying to print a page exactly as it looks in large screen but everything get stacked (and floated wrong). I succeded in having the grid in the printing page by substituting every "screen" occurrences with "print, screen" in the foundation.min.css. The problem is that the grid taken now is the small one. I read this post on the foundation support but honestly I don't know exactly what I'm supposed to do. Do I need to recompile foundation with sass? http://foundation.zurb.com/forum/posts/412-printing-paper-copies-of-site-built-on-foundation Whats should I do? Thanks.

Original source