jgthms/bulma

Add print utility classes

kmohrf opened this issue · 13 comments

kmohrf commented

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 commented

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

kylane commented

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

noraj commented

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.

  • 👍1
o8e commented

👍

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

  • 👍3
davidcook-ms commented

@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.

  • 👍2
glenndevenish commented

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

  • 👍3
linasim89 commented

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

Muhnad commented

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.

suterma commented

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!

neuronflow commented
Screenshot 2023-09-15 at 01 41 47 I am working on creating a research report. When I want to save the report as a pdf the navigation ribbon overlays the content. How can I avoid this?

My current ribbons:

 <!-- top ribbon -->
  <nav id="navitop" class="navbar is-fixed-top">
    <div id="topc" class="columns">
      <div class="column is-12">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-4">
          RESEARCH ONLY - <u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
    </div>
  </nav>

  <!-- bottom ribbon -->
  <nav id="navibottom" class="navbar is-fixed-bottom">
    <div id="botc" class="columns is-gapless is-vcentered">
      <div class="column is-4">
        {{ meta.readable_id }}
      </div>
      <div class="column is-4">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-6">
          RESEARCH ONLY <br /><u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
      <div class="column is-4">
        {{ meta.timestamp }}
      </div>
    </div>
  </nav>
suterma commented

Hi @neuronflow this is a valid question, however, this is not a Q&A here. I suggest you ask your question at Stackoverflow. They have a tag for bulma there an lots of experienced users. That said, I suggest you look into to the is-fixed-bottom and is-fixed-top and change the fixing and/or the height for printing specifically. See the above mentioned NPM package and links as an idea.

neuronflow commented

Thanks, posted on SO:
https://stackoverflow.com/questions/77110189/stop-bulma-ribbons-from-overlaying-content-when-printing

Sorry, I was under the impression that this is a bug and that the ribbons do not behave as intended, hence I reported here.

  • 👍1