mrgreentech/pam

Support for pam-Unit 0-X to grow from display: none

Closed this issue · 1 comments

Is your feature request related to a problem? Please describe.

I have a situation where I run a pam-Grid with two columns in the smallest screen width breakpoint, and grow it to three columns after reaching a bigger breakpoint.

<div pam-Unit="1-3">Left</div>
<div pam-Unit="1-3 small:1-3" style="display: none;">Center</div> <!-- Remove display: none; after reaching desired breakpoint -->
<div pam-Unit="2-3 small:1-3">Right</div>

Describe the solution you'd like

I would like to be able to use 0-3, or 0-X, in this scenario and grow up from there. A 0 would mean that the element is hidden.

<div pam-Unit="1-3">Left</div>
<div pam-Unit="0-3 small:1-3">Center</div> <!-- None existing in small devices, grows to be displayed for larger devices -->
<div pam-Unit="2-3 small:1-3">Right</div>

Describe alternatives you've considered

Have had to add own media queries and set the center pam-Unit to display: none; by default and then change to block after reaching the desired breakpoint.

Additional context

@frebos88 I suggest we do something like these two showing / hiding examples.

https://materializecss.com/helpers.html#hiding
https://getuikit.com/docs/visibility