This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Jane Ori
Ready for brand new CSS magic?
If you're writing a sharable component or library and want to provide your dev users an API that has CSS options like:
--size: sm; | --size: md; | --size: lg;
it's actually possible to do in CSS, without involving JS, a build system, or Style/Container Queries thanks to a new technique I've named "Type Grinding."
Type Grinding allows your design tokens (keywords, or “<custom-ident>” values) written in your CSS to be transformed into any other values - like width, padding, color, etc - without relying on anything outside of CSS.
The current global user support is 72.77% according to caniuse - specifically chromium based browsers.
How does it work?!
The company I work for, Bitovi, is super supportive and allowed me to drop what I was working on to write an article about this instead! So over on the company blog, I'll be destructuring the CSS involved here to teach how it works, bring awareness to what's possible, and hopefully empower you to do it yourself!
Please take a look - I would LOVE to see what you do with it!
Happy to answer questions below, on Twitter, or in the comments at the full blog post!
Thank you! 👽💜
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Jane Ori
Jane Ori | Sciencx (2022-10-03T21:19:29+00:00) CSS-Only Type Grinding: Casting Tokens (sm|md|etc) into Useful CSS Values. Retrieved from https://www.scien.cx/2022/10/03/css-only-type-grinding-casting-tokens-smmdetc-into-useful-css-values/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.