Hidden vs Hidden-only

[Dragomir-Ivanov]

Hi
Currently hidden-* classes hide only for certain screen size. It can become somewhat tedious for example to specify a hidden element for hidden-sm hidden-lg hidden-xlg. Also it is not consistent with say boostrap similar classes. My proposal is to replace current hidden-* classes with hidden-only-* and have change hidden-* to include stated and bigger screens, so hidden-sm will hide things for sm, lg, xlg etc.

[despecial]

I agree and would suggest this naming pattern

hide-for-sm
hide-sm

[Yoann-M]

Hello, I allow myself a little 🆙 on this topic.
If we take a look about the Responsive Utilities in the Bootstrap V4 Alpha release, the proposal focuses on:

• .hidden-sm-down to hide size sm and smaller
• .hidden-sm-up to hide size sm and bigger
• .hidden-sm to hide size sm only

So, if we take a look about the Bootstrap Responsive utilities code and its Breakpoints mixins dependencies, we can easily use it inside Reflex. I tried it and it works great 👍

👀 I see two things to define :

• Define the naming for Hidden utilities (we can keep the ones already defined)
• To introduce _breakpoints.scss, we may need to put it in a folder named mixins (this might change the architecture a bit)

Good to Know :
In Bootstrap V5 "Responsive utilities" are replaced by the Display Properties. Guess it's a good idea for Bootstrap ... but not for Reflex as it's done in Flex ... We don't need to handle display: block properties 😃.