Atomic show & hide classes

[moshie]

What do you think to having classes such as l:hide & xs:show for showing and hiding elements at different breakpoints?

const createDisplayStyles = () =>
  Object.keys(grid.breakpoints).reduce(
    (mediaQueries, breakpoint) => ({
      ...mediaQueries,
      [`@media screen and (min-width: ${grid.breakpoints[breakpoint]}px)`]: {
        [`body .${breakpoint}\\:show`]: {
          display: 'block',
        },
        [`.${breakpoint}\\:hide`]: {
          display: 'none',
        },
      },
    }),
    {}
  )

[tlaak]

I would have needed these today so take that as a yes.

[tlaak]

Display value could in some cases be flex or something else than block though

[moshie]

The concerns are the mixing of two very different css methodologies.

Perhaps we may consider adding atomic classes to our roadmap however, that is a discussion for the guild.

i.e.
<Button fullWidth={true} /> vs <Button className="w-100" />
<Text align="center" /> vs <Text className="text-center" />