Base 5 and page printing

Question

I am using the Zurb Foundation. I try to print the page exactly as it looks on the big screen, but everything fits (and floats incorrectly).

I got a grid on the print page, replacing each “screen” appearance with “print, screen” in the foundation.min.css file.

The problem is that the grill adopted now is small.

I read this post about fund support, but to be honest, I don’t know exactly what I should do. Do I need to recompile the fund with sass?

http://foundation.zurb.com/forum/posts/412-printing-paper-copies-of-site-built-on-foundation

What should I do? Thanks.

Answer 1

Here is the CSS for this:

@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

Do I need to recompile the fund with sass?

Well yes. You need to create your own sass file and put the print rules in it. Then recompile the file using the Sass compiler.

Inside the scss/ folder there are two files normalize.scss and foundation.scss . Create a new file called app.scss and import the normalization and base as follows:

 // Import the normalize.scss @import "normalize"; // Import the foundation.scss @import "foundation"; // Your own SCSS here... 

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

For example, you can make a large grid print friendly by adding 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 have not tried this myself. However, he found it useful at the Foundation's forum.

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

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

Answer 3

These three sass loops simplified my life while styling print pages and worked like a charm.

The $ total-columns variable is derived from the core kernel 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 4

Follow the @Hashem Qolami answer, but you need a little change in the loop because for some reason it does not calculate the percentage value for the columns, and gridCalc() no longer recommended (line # 22) in Foundation 5. Therefore, instead of grid-calc() you should use grid-calc() or much better if you calculate percentages:

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

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

Set width for all large html:

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

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

 $screen: "only print, screen";