LUME AutoLayout implements Apple's Auto Layout and Visual Format Language in Javascript (TypeScript), and will soon compile to WebAssembly via Assembl

lume / autolayout

submited by
Style Pass
2021-05-29 02:00:03

LUME AutoLayout implements Apple's Auto Layout and Visual Format Language in Javascript (TypeScript), and will soon compile to WebAssembly via AssemblyScript for optimized layout calculation.

Auto layout is a system which lets you perform layout using mathematical relationships (constraints). It uses the LUME Kiwi library to do the actual constraint resolving and implements Apple's constraint system and Visual Format Language (vfl) on top of that. It supports the Extended VFL syntax, including view-stacks and z-indexing.

LUME AutoLayout is an abstract library for integrating Auto Layout and VFL into other javascript technologies. It provides a simple API and programming model that you can use to build your own auto layout and VFL solution. A simple example of this is, is using position: absolute; to lay out DOM elements. A more elaborate example of this is the Visual Format Editor, which is built using famo.us and famous-flex.

A View is the main entity onto which constraints are added. It uses the cassowary SimplexSolver to add relations and variables. You can set the size of the view and other properties such as spacing. When constraints are added it automatically creates so called "sub-views" for every unique name that is encountered in the constraints. The evaluated size and position of these sub-views can be accessed through the .subViews property.

Leave a Comment
Related Posts