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