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

What is Framer? Join the Community
Return to index
Javier Chávarri
Posted Feb 21 - Read on Facebook

Hi all, I've been experimenting with a CSS flexbox library and Framer, so the prototypes built with Framer can be shown in multiple screen sizes without much work, just by setting some rules. Flexbox allows you to define things in a declarative way ("what to do") instead of imperative ("how to do it") for example:

layerA.flex = 0.4 # Take 40% of the parent size
layerABrother.flex = 0.6 # Take 60% of the parent size

layerA.minHeight = 40 # But at least give layerA 40px height

So far I got a "cells layout" example working, but I'm really amazed about how powerful the mix of a flexible layout + Framer animation engine is.

My question to you guys: are there any ideas or existing prototypes you would like to try with this flex system? Please share a link or code if you do

8 Comments

Johannes Eckert

Javier Chávarri I'd like to use flexbox in my next prototype and I thought it would be easy to write a basic CSS flexbox layer class, but your code really has lots of methods and such.

However … I have a hard time understanding what's going on — I can't seem to get this working by copy and pasting app.coffee into the latest Framer Studio. Are you using a custom version of Framer here? I really can't tell where layer.flex or layer.fixedWidth come from

Charlotte Cavellier

Wow... This awesome for us designers!!! GG!!

Lukas Imrich

.framer file, please :)

Javier Chávarri

You can grab the code of the GIF above from Github https://github.com/jchavarri/framer-flex Please note this is mainly a WIP and might not be stable at all
You can alternatively play with it here http://jchavarri.github.io/framer-flex/

Lukas Imrich

thank you

Marc Krenn

Dunno why this was ignored on git for so long :( It's a killer.

First Hammer, now this ... man, you just keep pushing it ...

Javier Chávarri

Thanks Marc Krenn ! But as they say, i'm standing on the shoulders of giants :)
If you have any insight about the proposed syntax or have any examples you'd like to test with this layout system, let me know! As a left-brainer, sometimes it's hard for me to find creative use cases for this stuff, so your help would be much appreciated 👍

Daniel Lauding

Bombo!

Read the entire post on Facebook