Open benjamingwynn opened 4 months ago
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!
@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
is this still something that needs to be done? if so, i would be more than willing to help out with it.
@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 :)
@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?
@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
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 andfont-size: 11px
declared forbutton, 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!