Scale UI components with font-size using em units, remove hardcoded px units

[benjamingwynn]

The font-size is currently hardcoded for a lot of styles. As 98.css isn't readable at high resolutions (see #56) it would be useful to be able to define an explicit font size and have components scale correctly accordingly.

For example, instead of the font-size: 12px hardcoded on the body and font-size: 11px declared for button, label, input, legend [...] we can define a font size of 0.91667em (11/12 ~= 0.91667) and remove the font-size on body.

I have a prototype of this but not with all the sizes yet, I'm happy to finish it, write up a PR and make it official if this is useful!

[tazjin]

I have a prototype of this but not with all the sizes yet, I'm happy to finish it, write up a PR and make it official if this is useful!

It definitely would be!

[benjamingwynn]

@tazjin hey, I never got around to finishing the conversion from px units to em, so I don't want to write a full PR (yet?); but have made a good dent in the basic components on the em-units branch - I also made some other potentially useful styling changes on the main branch which I found worked better specifically with Safari

Fork is available at https://github.com/benjamingwynn/98.css if you're interested

[Dodge100]

is this still something that needs to be done? if so, i would be more than willing to help out with it.

[benjamingwynn]

@Dodge100 I think I made a good start, but it needs further testing and there are some styles missing (like ul.tree-view, ul.tree-view ul for example) since I haven't used them in the target project yet -- if you decide to pick this up hopefully you can build on what I have in my fork :)

[Dodge100]

@benjamingwynn just asking, but would it not be better to use rem instead? also, the current em calculations are based off font-size: 12 px, right?

[benjamingwynn]

@Dodge100 I removed the font-size: 12px line - the idea should be that you can add font-size: 12px to whereever in the CSS tree you want and you'd get the same 1:1 scaling with 98.css before this change

So yeah they're based off of 12px but the idea is it shouldn't matter (e.g. in my project i have windows with a font size of 13.95px which works well for 96dpi @ 4k)

If you were not to declare font-size it'd default to 16px from the user agent style, or inherit from the parent font size - hence the use of em over rem. e.g. you want to scale one window smaller than the other, rem is always root (body) em's so you wouldn't be able to have different sized windows, but with em each .window can declare its own font-size if needed