design-system-components
design-system-components copied to clipboard
`.hidden-*` class selector to hide elements without @media queries / Utility classes
Feature Request
- [x] I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
- [x] I’ve read and agree to the Code of Conduct.
- [x] I’ve searched for any related issues and avoided creating a duplicate issue.
- [x] I've searched the community forums to check for related issues or feature requests
Is this feature request relating to an existing component? Please describe.
- Component name:
grid-12
- Component version:
all
Similar to what is documented here: https://getbootstrap.com/docs/3.4/css/#responsive-utilities-classes it'd be nice to given dev/designers a utility class like .hidden-sm
when they want to hide something for mobile. It seems that bootstrap by default uses the display:none
property.
@adamzerella does the content need to be "deleted" on mobile (i.e. invisible and not read to SR users), or just visually hidden?
@gordjw that's a pretty good point.
It would hidden with the display:none
property, which would mean it is deleted (not visible to screen, not read to screenreader users).
We have a sass mixin which hides content visually, but not for the screen reader user.
It really depends on if you're going down the path of creating utility classes or whether mixins are sufficient.
If you're going to create .hidden-*
, it might be worth considering an .sr-only
utility class as well. That would cover both use cases.
AUDS has this in the test.scss already, for example: https://github.com/govau/design-system-components/blob/4ff8344d225722d80549e85703916a36ebd061b3/packages/core/tests/site/test.scss#L155
Just something to think about :)