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 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.

Answer 1

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

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