Implement and document hide- classes
#140
Conversation
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 75em) { |
There was a problem hiding this comment.
all of these max-widths should probably be more like 74.9375em otherwise they apply too far up?
There was a problem hiding this comment.
Possibly. How did you determine that number exactly?
|
Flexbox grid will not be adding this feature. |
|
@kristoferjoseph could you please explain why 😥 ? IMO this is very useful... |
|
|
|
Quoting Ethan Marcotte:
As far as I can tell, most of the work for this has been done, there's seemingly little to lose by adding it to the project (other than a small amount of bloat), and it does handily solve those edge cases mentioned above. |
|
+1 on adding |
|
+1 on adding ... |
|
+1 on adding |
|
Isn't hiding/showing considered as some kind of "different behavior" too? |
|
+1 on adding this... this is a super helpful feature. |
|
One use case for this is advertising. You don't want to try to show a 300x250 add block on a mobile screen. Instead, you want to use the mobile add. Responsive ads are getting better but it is still very nice to avoid showing big ad blocks. |
|
Looks like there is this now: https://github.com/lgg/flexboxgrid-helpers Maybe add a link to the docs? |
|
I think it will make it into 7.0 |
As requested in #138, I've implemented and documented some classes that provide the ability to hide or show content based on viewport size.
The classes are:
hide-xs,hide-sm,hide-md,hide-lg: Hide only on the viewports specified.hide-sm-up: Same ashide-sm hide-md hide-lg.hide-md-up: Same ashide-md hide-lg.hide-sm-down: Same ashide-xs hide-sm.hide-md-down: Same ashide-xs hide-sm hide-md.New documentation visible at: http://derflatulator.github.io/flexboxgrid/#hiding
There is no real need for
show-classes, as at most twohide-classes would be required for any configuration.