Dear Framer folks, have any of you successfully used CSS classes in your project? The example provided for Utils.insertCSS() in the docs doesn’t seem to work. Any ideas?
The docs: https://framer.com/docs/#utils.insertCSSAn example: https://framer.cloud/rXMec/
Hey andy, Im new to framer but this is how i do it, layer.style ="color":"black""font-family":"Gotham-Medium""font-size":"200px""text-align":"center""letter-spacing":"-5px""padding-top":"100px"
Hi Andy, this is indeed a bug in the documentation. You will need to add ‘!important’ to the CSS in the example for it to work, because there is already a border set. For the font-size it should work though, but you must specify the size with the quotes around 100px, else it’s not valid CSS. However, usually it’s easier to use the `style` proprety of the class, like Jj said (see https://framer.com/docs/#layer.style)
Thanks for getting back to me Eelco! I am aware of the style property, but I’ve been looking for a way to share styles between elements that are mostly the same. Imagine two buttons in an iOS navigation bar: they look and act the same, and the only difference is the alignment (left and right). The same would apply to custom fonts or colors that I use in my projects. Will try adding “!important” to the CSS. Thanks!
The style property is just an object though, so it can be easily shared between layers. Framer includes lodash (http://lodash.com/) which has some handy functions to override specific properties but fall back to defaults otherwise, see the code of https://framer.cloud/EVWOJ for an example.