IjzerenHein/visualformat-editor

autolayout + vfl integration with famo.us

Closed this issue · 9 comments

trusktr commented

when someone would do this! Nice!! ✨

Can you add some docs on how to use this in a Famous project? (main.js is informative though. Super awesome.)

IjzerenHein commented

Hi, I'm going to make an integration for famo.us real soon :)
Actually, the (my) whole purpose of autolayout.js was to bring autolayout and VFL to famo.us.
For now, you can have a look at src/vflToLayout which you can use to convert vfl to a layout function which can be used by a famous-flex LayoutController.

trusktr commented

I saw that. This is very awesome!!!

IjzerenHein commented

Hi, I've added an instruction on how to get started with VFL and famo.us here:
IjzerenHein/famous-flex#3 (comment)

cheers

trusktr commented

This is great stuff @IjzerenHein!! 👍 Can't wait for the Mixed Mode version. 😄

IjzerenHein commented

I've got it up & running, should be real soon now!

IjzerenHein commented

Alright, mixed mode is now supported :)
https://github.com/IjzerenHein/famous-autolayout

IjzerenHein commented

Let me know what you build with it.
I have tons of exotic VFL examples that I have already build for clients.

trusktr commented

Looking forward to trying it. :)

IjzerenHein commented

It has already completely changed my workflow. Complex layouts that needed to scale to any device and changed on a nearly daily basis were taking most of my time. Now it's done in just minutes.

Just throw that in the visual format editor:

//--viewport aspect-ratio:16/9
//shapes avatar:circle
//shapes page1:circle page2:circle page3:circle page4:circle page5:circle
//colors title:#FFF message:#282B2D button:#48E0A4
HV:|[background]|
H:|[_leftSpacer(>=5%)][avatar(avatar.height)][_middleSpacer(avatar/10)][message(avatar*1.37)][_rightSpacer(_leftSpacer)]|
H:[_middleSpacer][title(message*0.48)]
H:[button(message*0.32)][_rightSpacer]
H:[pagers:[page5(page5.height)]~(page1*0.7)~[page4(page4.height)]~[page3(page3.height)]~[page2(page2.height)]~[page1(page1.height)]~][button]
V:|~[avatar(<=68%)]~|
V:|~[title(message)][_messageSpacer(avatar*0.1)][message(avatar*0.26)]~|
V:[message][button(avatar*0.13)][_bottomSpacer]|
V:[message]~[pagers(button*0.6)]~[_bottomSpacer]|
Z:|[background][avatar]
Z:|[background][message]
Z:|[background][title]
Z:|[background][button]
Z:|[background][pagers]
  • ❤️1