azerella commented 5 years ago

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.

gordjw commented 5 years ago

@adamzerella does the content need to be "deleted" on mobile (i.e. invisible and not read to SR users), or just visually hidden?

sukhrajghuman commented 5 years ago

@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.

gordjw commented 5 years ago

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 :)

govau / design-system-components

`.hidden-*` class selector to hide elements without @media queries / Utility classes #669

Feature Request

Is this feature request relating to an existing component? Please describe.