-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Print styles #9250
Comments
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 |
Currently, at the end of http://foundation.zurb.com/sites/docs/ : I'll make a PR 😄 |
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. 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; |
I think I think |
I agree that |
Nice |
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? |
@kball I like the idea of |
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? |
This is… involved. |
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 |
What if we modified the breakpoint code so that every breakpoint up to the So something like
|
@kball Great. It would avoid any code duplication, isn't it ? |
@ncoden I think so, yeah |
@kball is there an advantage to adding |
@andycochran I don't think that would work - e.g. large styles are built up from base, layer on medium up, then large up |
Ah! True. I'll try out this method… |
I'd love to get @brettsmason's feedback on #9304. 😁 |
Finally following up on this (had to first figure out how to add a pre-release via npm). (pringing #9304) |
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 #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:
The text was updated successfully, but these errors were encountered: