Foundation-sites: Print styles

[anselmdk]

I find myself again and again jumping hoops to get Foundation 6 based sites to print properly.
Am I missing something here, or could we do some improvements in that area?

See attached for a very simple example, and also https://github.com/zurb/foundation-sites/issues/8992

I think for the very least showing the urls should be configurable in the _setting.scss and by default the large grid should show when printing.

Browser:

Print Preview:

[kball]

This is interesting... there's a couple of things going on.

Looking at how all of the breakpoints etc are defined, they all include a 'screen only' as a part of their media query... so by default things are going to lay out essentially ordered as they would on a small screen, but only using the default styles.

It also looks like the ONLY thing that is configurable right now in the print typography styles is whether background should be transparent or not.

This definitely feels like a set of oversights... it kind of feels like you should be able to specify if you want things to lay out via the grid or not, and probably have a set of additional common configurations (like link styles) available via settings.

@ncoden @brettsmason @andycochran interested in your thoughts

[ncoden]

Currently, at the end of http://foundation.zurb.com/sites/docs/ :

I'll make a PR :smile:

[andycochran]

I'm finding it difficult to determine the best approach for print styles without making app-specific assumptions.

It'd be grueling to have to comb through markup and apply classes for print (e.g. hide-for-print) like we do for screen readers (e.g. show-for-sr). I often keep a list of components that I don't want to print and apply a display:none to the group in a print stylesheet. I wonder if that could be automated or abstracted somehow.

Maybe the grid could be handled with print-specific classes: 

<div class="row">
  <div class="columns medium-3 large-4 print-4">…</div>
  <div class="columns medium-9 large-8 print-8">…</div>
</div>

…or maybe a settings variable would be better:

$print-breakpoint: large;

[ncoden]

I think .print-* grid classes would almost never be used, and are heavy in the .css. How $print-breakpoint would work ?

I think hide-for-print and show-for-print are enough.

[andycochran]

I agree that .print-* isn't ideal. A $print-breakpoint variable could put the grid rules for a specific breakpoint into a @media only print query.

[jarrydfillmore]

Nice

[kball]

I like the idea of specifying a $print-breakpoint, probably defaulting to large, plus exposing the url config. @anselmdk are there other things you think would be needed to meet your usecase?

[anselmdk]

@kball I like the idea of $print-breakpoint, defaulting to large. I think that plus exposing the url config would bring us a long way!

[kball]

Ok cool. Our current 6.3 roadmap has a lot of JS improvements and fewer SCSS changes, perhaps this would be a good thing to slot in there. Any of the SCSS focused @zurb/yetinauts interested in taking this on?

[andycochran]

This is… involved.

[andycochran]

I'm not sure that print styles for just the grid are enough. Every component will print with its mobile-first styles. An alternative would be to put _all_ styles from the breakpoint that matches $print-breakpoint into an only print media query. This would add a lot of bloat.

[kball]

What if we modified the breakpoint code so that every breakpoint up to the $print-breakpoint contains print? I think we can include multiple matches just by comma separating...

So something like

@mixin breakpoint($value) {
  $str: breakpoint($value);

  // If $str is still an empty string, no media query is needed
  @if $str == '' {
    @content;
  }

  // Otherwise, wrap the content in a media query
  @else {
    @if printable($str) { // TODO:  Define printable to return true if less than $print-breakpoint
      @media print, screen and #{$str} {
         @content;
       }
    }
    @else {
      @media screen and #{$str} {
        @content;
      }
    }
  }
}

[ncoden]

@kball Great. It would avoid any code duplication, isn't it ?

[kball]

@ncoden I think so, yeah

[andycochran]

@kball is there an advantage to adding print, to all media queries up to the one matching $print-breakpoint? Couldn't we just add print, if breakpoint($value) = $print-breakpoint?

[kball]

@andycochran I don't think that would work - e.g. large styles are built up from base, layer on medium up, then large up

[andycochran]

Ah! True. I'll try out this method… 

[andycochran]

I'd love to get @brettsmason's feedback on #9304. 😁

[anselmdk]

Finally following up on this (had to first figure out how to add a pre-release via npm).
This looks great, see attached screenshot.

(pringing https://github.com/zurb/foundation-sites/pull/9304)