Bulma: Add print utility classes

[kmohrf]

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.4.1]
I am sure this issue is not a duplicate?

Description

It would be nice to

• have response helpers for the print media in order to hide/show elements
• be able to determine the sizing of elements with the .is-([0-9]+)-print classes

It might also be reasonable to hide some elements in print styles like buttons and navs by default but that may be to invasive, unintuitive and in my experience a few .is-hidden-print classes are easily added.

I’m not familiar with sass, but in case you like the idea of having print utility classes i might be able to put together a pull request.

[markvesterskov]

Agreed, this is a great idea, that seems manageable to implement.

[kylane]

Did this go anywhere? Would be nice to be able to control the display of my bulma layout for print!

[noraj]

I found some good ideas here: https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6.
I'll try this for my website using bulma.

[o8e]

👍

I'm all in for .is-hidden-print at the very least. I've initiated something in #2329.

[davidcook-ms]

@media print {
.is-hidden-print {
display: none !important;
}
}
I have this in my project. Let me know if it's bad form. I'm relatively new to CSS.

[glenndevenish]

column is-[x]-print would be nice, along with mobile, tablet, desktop etc

[linasim89]

hi, would love to try this feature. but the commit seems to have conflict?

[Muhnad]

Hey @jgthms, @kmohrf, @o8e

I think we need to adding support for print by:

• Adding global print style that handles all print stuff like page dimensions @page, displaying content CSS fragmentaion, and so on...
• Adding utility classes to hide/show elements based on media type in this case(@media print).
• Hide decorative things like background-image.
• Unify the background-color and color of the print page.
• Showing the external links URL beside the content by using this CSS hack:

a[href^="http"]:not([href*="mywebsite.com"]):after {
  content: " ("attr(href)")";
}

that's all in my mind right now. I could update the list later.

[mlncn]

Here is what we're using, based on https://github.com/jgthms/bulma/pull/2329:

https://gitlab.com/find-it-program-locator/newtowne/-/blob/8.x-1.x/src/global/_print.sass