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

[azerella]

Feature Request

• I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
• I’ve read and agree to the Code of Conduct.
• I’ve searched for any related issues and avoided creating a duplicate issue.
• 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]

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

[sukhrajghuman]

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

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:

design-system-components/packages/core/tests/site/test.scss

Line 155 in 4ff8344

//------------------------------------------------------------------------------------------------------------------------------------------------------------

Just something to think about :)