css-gridish icon indicating copy to clipboard operation
css-gridish copied to clipboard

Use `display: unset` instead of `display: block` for dealing with the `--0` utility selectors.

Open TazmanianDI opened this issue 6 years ago • 2 comments

There is a set of utility classnames that you can add to an element that just tells the element how many columns to span at a given breakpoint so you don't have to declare explicit grid positioning for the element (e.g. ibm-grid__col--lg--2).

This includes the ability to hide a column with --0 which uses display: block. To override this at higher breakpoints, the selectors use display: block but display: unset should achieve the same thing without offering an opinion about just which type of display the element should be add.

TazmanianDI avatar Mar 19 '18 20:03 TazmanianDI

unset is not supported in IE and I don’t think it would have the affect you really want. How about modifier classes to tell the element which display property it is toggling between?

seejamescode avatar Mar 19 '18 20:03 seejamescode

After talking more with you on Slack, it seems like the --0 rules should be contained in media queries with max-width included. Can you take this on?

seejamescode avatar Mar 19 '18 20:03 seejamescode