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

These three sass loops have made my life easier when styling pages for print and have worked like a charm.

The variable $total-columns comes from foundation's core settings.

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

  @for $i from 1 through $total-columns {
    .medium-#{$i} {
      width: 100% * ($i/$total-columns);
    }
  }

  @for $i from 1 through $total-columns {
    .small-#{$i} {
      width: 100% * ($i/$total-columns);
    }
  }