Add print modifier and utility classes (fixes #721)

[o8e]

This is a new feature.

Proposed solution

There is currently no way to modify the page layout based on the media type (specifically, print). This essentially adds modifiers to columns, and provides a helper class to hide when the print type is in use.

Tradeoffs

N/A

Testing Done

✅ Build project ✅ Test the added classes in a real scenario

This is an example using the is-hidden-print to hide the left column image and is-full-print to then stretch out the remaining column to be full width.

[jgthms]

Nice one! I’ll have a look at it.

[jgthms]

I like the is-hidden-print helper and the =print. We should get that.

I'm not sure about all the print column classes. I think > 90% will never use it. What we can do however is have a class to disable Flexbox for some columns:

.columns
  +print
    &.no-print
      display:block

This would disable columns on print, kind of like in your gif, and keep everything vertical.

[mpereira]

@o8e thanks for submitting this PR.

@jgthms fwiw, I'd use the print column classes.

[Maxhodges]

@jgthms attention please #1325

[mlncn]

https://github.com/jgthms/bulma/pull/2329#issuecomment-459391961 is what i expected Bulma to do already, disabling columns on print (it seems columns are really problematic for pagination, causing everything to be on separate pages).

I think a sensible default so that Bulma sites look good printed for the 95% of people who won't even touch stylesheets is good, but i think that the print column classes should be available and override, because for the few of us who do want to actively adjust how things are printed, we'll need them, or something more than is-hidden-print, most of the time!

Edit: I misunderstood the clear code above and it doesn't do anything by default.

Trying out all of these classes in my own code for a very quick rework to improve print styling, will report back.

[smisaacs]

we'd use columns as well. +1

[suterma]

Late, and surprised that we still do not have this yet. Seems like a simple and unobtrusive solution. If this is too much, I really suggest doing at least something like "is-hidden-print". This would really help in many cases.

I will do this in my own addition now, in the meantime.

[suterma]

By now I have created this small NPM package: https://www.npmjs.com/package/bulma-print to use as a stand-in until printing support gets into Bulma proper. Suggestions, Comments and contributions are welcome!