Open owenandrews opened 5 years ago
It's ok that the precedency has changed, but how to achieve the functionality that @owenandrews mentioned?
Hi - any updates on this? I see there is a PR open to reverse this, which is causing the opposite problem. In the current state, .dn will override .flex-ns, which is breaking our design...
@papiliond @owenandrews Until the pull request is accepted, you can easily get around this by:
1) Creating a local _tachyons-sass.scss
file in your project
2) Copying the tachyons-sass
manifest file's contents into your new _tachyons-sass.scss
partial locally (be sure to update the paths based on where your node_modules
folder is
3) Swapping the order of the display and flex partial imports in your custom partial
Then, when this is working correctly, your element class lists for responsive flexbox layouts should look something like <div class="dn flex-m flex-l">Hidden only on small screens<div>
I can't think of any reason the precedence should have changed if tachyons wants to support mobile-first flexbox layouts, other than being able to dynamically add the dn
class to hide & show elements. Tachyons should introduce a .hide
class instead that comes last in the cascade (or you can just make your own class to do this in your project).
I've noticed that when using the media query extensions on the flexbox module in conjunction with the display module, they don't seem to behave as expected. I would expect the below code to display flex on large displays and display none on all other sizes, but instead it stays permanently hidden.
<div class="dn flex-l">Foo bar<div>