Grids specify a font-family: why?

[jconniff]

I noticed another thing I have to override in Pure, that seems opinionated.
I can't think of a reason for this.

.pure-g [class *="pure-u"] {
font-family: sans-serif;
}
Suppose I specifically choose a font-family for my site with
body {
font-family: fontOfMyChoice;
}
anywhere I use grids, I'll see 'san-serif' instead of my font.

[lkraav]

Nothing to do with "opinionated". Read the docs http://purecss.io/grids/#using-grids-with-custom-fonts

[lkraav]

@redonkulus https://caniuse.com/#feat=flexbox shows ~95% usage. Wdyt, in celebration of year 2019, should the docs update the recommendation to .pure-g, .pure-g [class *= "pure-u"] { font-family: inherit; } (=== just roll w/ user/parent element font choices)?

AFAIU this font stack was necessary in the earlier days where inline-block might have been the prevalent display model, but w/ flexbox display where font stack has no effect, it just mostly gets in the way, having to override weird constructs lower in the element stack.

Maybe even combine an updated recommendation w/ @supports {}.

Your thoughts?

[KeiroD]

Hmm. I think this would be a good change, as reducing weird constructs would be good, in my book.

I'd go with this change. personally.

[lkraav]

@redonkulus your thoughts on re-open?

[redonkulus]

@lkraav will this break anyone if we change it?

[lkraav]

will this break anyone if we change it?

Ain't that the million-dollar question :)

I made the change on my live sites already before posting this, and modern browsers didn't blink in any way. But people actually relying on inline-block rendering might have their columns pushed out. My hypothesis is that the casualty risk surface is fairly small, though.

Release 2.0.0 and call it "maybe backwards-compatible"?

[redonkulus]

@lkraav We could do that. If we go with a major release I would be interested to see if there are other breaking changes we would want to add. It would be good to roll them out in one release. Want to open an issue for 2.x and start adding currently open issues that would fall into that category?

[septatrix]

I also just stumbled upon this. Based on the discussion it seems to me like a remnant of more complicated times.

Is the font override still on track for being removed?

[redonkulus]

@lkraav we already did a major version bump so I guess that ship has sailed.

@septatrix I'm ok with removing the font family, it's not really needed anymore since flexbox and grid are available everywhere. Anyone that wanted it changed already would have done it in their project.

[septatrix]

@septatrix I'm ok with removing the font family, it's not really needed anymore since flexbox and grid are available everywhere. Anyone that wanted it changed already would have done it in their project.

Should I create a PR then or would you like to do it? I assume the codebase is simple enough for me to find it :D

[redonkulus]

@septatrix yes please do! You can switch it to inherit.

Also please go into the site/ directory and run npm run start to make sure your change looks ok on the docs site and especially the "Grids" page.

[septatrix]

Any advantage of using inherit instead of just removing the font-family declaration?

[redonkulus]

I'm with with removing it too if that works.

[septatrix]

Looking into the source it seems like the hack is still used for IE10/IE11 which are still supported.

https://github.com/pure-css/pure/blob/master/src/grids/css/grids-core.css#L33-L38

They theoretically support flexbox but they seem to suffer from a few potential issues, see the respective tab in caniuse: https://caniuse.com/flexbox

So while in my opinion no one today should go out of their way to support these browsers as they are officially unsupported as of this year (yay!) I am not sure if this should be done without a major version increase...

[redonkulus]

Good point about the IE 10/11 support. We can just remove support for those browsers since they are EOL'd and release 3.x.