css
css copied to clipboard
master-co
✨ An option `Style.rootSize` for converting `em`/`rem`
Discussed in https://github.com/master-co/css/discussions/48
Originally posted by gammx August 20, 2022 Hey, my app has a different px:rem ratio applied, like:
html {
font-size: 62.5%;
}
So when I'm using Master applying a class like f:15 results in something completely different from what I wanted, is there any option to configure how the px -> rem conversion works so I can stop writing the "rem" suffix for numeric values? 🤔
Reference: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
This is something I use in my workflow currently via SCSS, so its nice to see Master picking it up; just a few pointers, I think the font-size should be defined in ::root and then body should contain font-size: 1.6rem; as a best practice as browsers rely on font sizes to calculate REMs, and people with zooms at 50% or 300% should have a consistent experience.
🥳
@master/[email protected]is now available for the feature.Are the Docs available for this
We expect the API to be re-designed in the upcoming v2, and it'll be well migrated from v1, so we may be a little bit passive on doc updates for the time being. 🙇🏻
Expect Master CSS to set <html> according to rootSize: 10 with:
html {
font-size: 62.5%;
}
body {
font-size: 1.625rem;
}
Expect Master CSS to set
<html>according torootSize: 10with:html { font-size: 62.5%; } body { font-size: 1.625rem; }
This would be ideally, to cover all use cases:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
It's 1.6rem as it would represent 16px, which is the default for almost all browsers.
It's not recommended to automatically set CSS for the user as it may have SEO related concerns like FOUC and CLS.