Add print utility classes
kmohrf opened this issue · comments
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.
Agreed, this is a great idea, that seems manageable to implement.
Did this go anywhere? Would be nice to be able to control the display of my bulma layout for print!
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.
👍
I'm all in for .is-hidden-print
at the very least. I've initiated something in #2329.
@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.
column is-[x]-print
would be nice, along with mobile
, tablet
, desktop
etc
hi, would love to try this feature. but the commit seems to have conflict?
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
andcolor
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.
Here is what we're using, based on #2329:
https://gitlab.com/find-it-program-locator/newtowne/-/blob/8.x-1.x/src/global/_print.sass
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!
![Screenshot 2023-09-15 at 01 41 47](https://private-user-images.githubusercontent.com/7048826/268135464-02dd6ca4-d6e2-4188-a686-6979a90acd43.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MjY5ODksIm5iZiI6MTcyMzgyNjY4OSwicGF0aCI6Ii83MDQ4ODI2LzI2ODEzNTQ2NC0wMmRkNmNhNC1kNmUyLTQxODgtYTY4Ni02OTc5YTkwYWNkNDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTZUMTY0NDQ5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGJlMWM2ZTJjZWQ2YmQ0ZjgxZTc3YzUyZmVmOTdiODhkNTkxYzZhOGYxNGFhZTAwMjY5ZGU5NGVmYmE2MGQwMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.1rc3nZjnyZ2ijSYI_uAKDYNkSkJQA-Zx-BqHH-v6Ob4)
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>
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.
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.