Foundation 5 and page printing

Question

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

Answer 1

Follow @Hashem Qolami's answer, but need a small change in for loop because for some reason it doesn't calculate the percentage value for columns and also the gridCalc() already deprecated (line #22) in Foundation 5. So you should use the grid-calc() instead or much better if you calculate the percentages directly with percentage():

@media print {
  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: percentage($i / $total-columns);
    }
  }
}

It will do the basic things but need more hacks if you created a custom HTML structure with some tricks.

Set the width for the whole html to large size:

@media print {
  html {
    width: rem-calc(1280px);
  }

  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: percentage($i / $total-columns);
    }
  }
}

And finally in the _settings.scss (around line #82) set the $screen value from "only screen" to "only print, screen":

$screen: "only print, screen";