This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Andy Jakubowski
Posted Mar 16 - Read on Facebook

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.insertCSS
An example: https://framer.cloud/rXMec/

4 Comments

Jj Gacheru

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"

Eelco Lempsink

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)

Andy Jakubowski

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!

Eelco Lempsink

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.

Read the entire post on Facebook