Building Layouts with Famo.us

Since Famo.us abstracts away most direct management of the DOM, you can’t rely on the normal flow of the document to implement your layout. Instead, layout must be implemented within the render tree.

Building layouts in Famo.us can be tricky at first, but keep in mind that Famo.us gives you the capability to create almost any layout you can dream up (including layouts in 3D), going beyond what is possible with traditional web techniques.

Overview

Layout in Famo.us is accomplished using modifiers. Modifiers bundle together a key set of properties used to create layout:

size
origin
align

Together, these allow for element positioning and justification with respect to other elements.

Sizing

To size elements, we can use the size property, or scale elements using a transform. Read about how to size elements »

Positioning

To position elements, we use the special properties origin and align. Learn how to position elements »

Ready-made layouts

Famo.us provides a set of ready-made layouts that cover the most common needs. Explore Famo.us’ pre-built layouts »

Responsive layouts

To create responsive layouts — layouts where elements are aware of their parents’ size — we need to use a few special techniques. Understand responsive sizing in Famo.us »

First stop: Sizing »