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

Do I need to recompile foundation with sass?

Well, yes. You need to create a custom sass file and put the print rules inside that. Then recompile the file with Sass compiler.

Inside the scss/ folder you have these two normalize.scss and foundation.scss files. Create a new file named app.scss and import the normalize and foundation as follows:

// Import the normalize.scss
@import "normalize";

// Import the foundation.scss
@import "foundation";

// Your own SCSS here...

And then put the below code snippet at the end of app.scss file as suggested by Rafi Benkual:

For example you could force the large grid to be print friendly by adding in the following code to your project:

// This would make the large grid function like a print grid
@media print {
  @for $i from 1 through $total-columns {
    .large-#{$i} {
      width: gridCalc($i, $total-columns);
    }
  }
}

Note: This may or may not work. I didn't try this myself. However it's deemed helpful at Foundation Forum.

The $total-columns variable is defined in scss/foundation/components/_grid.scss file, which you can override that (as the other settings) by editing scss/foundation/_settings.scss. Hence you need to import @import "foundation/settings"; before the foundation file.

Finally, compile the app.scss file by: sass --watch app.scss:app.css

Answer 2

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);
    }
  }

Answer 3

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

Answer 4

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";