Image by Kelly Sikkema

ThoughtForma provides an easy to use and powerful method for laying out your components flexibly in a way that is consistent across web and mobile devices. Below is an explanation of how each of the pieces in the Layout menu work.

ThoughtForma Layouts


ThoughtForma uses rows as the basis for laying out components, and so the Row piece is fundamental.
This is how a row is laid out on a page...


The Left piece will arrange its contained components to the left side of a row.


The Right piece will arrange its contained components to the right side of a row.

Multiple Left &  Right

If you add multiple Left and Right pieces like this, ThoughtForma will render the following layout. The Row piece will not allow pieces to be added out of order (eg a Right piece cannot by added before a Left piece).


The Middle piece will layout components in the middle of the row and will take up all of the available space horizontally.

Left, Middle & Right

When adding a Left, Middle and Right piece to a Row the components they contain will be laid out like this. Components in a Middle piece will expand to fill the area available between Left and Right components.

Multiple Middles

You can add multiple Middle pieces to separate and evenly distribute the components they contain. You can add as many Middle pieces as you like between Left and Right pieces.

Shrink-width Box

The Shrink-width Box can be used to pull pieces together inside a Middle piece. Only Left pieces can go inside a Shrink-width Box.

Vertical Scrolling Box

The Vertical Scrolling Box can be used between Row pieces and it does two things. Firstly, it pushes any content under it to the bottom of the screen. Secondly, the content inside it will scroll vertically if it spills off the bottom of its bounds. This piece is used for creating layouts that are very useful in apps - with content in the middle and a navigation bar at the bottom.

Hints & Tips

When using Icon, Image and Webview pieces, their Height and Width properties must be explicitly set in order for the component to appear on the screen.

If you want to experiment and see how a layout piece works you can try adding a Border Width and Color property to it and observe the result in the Previewer

It is often useful to use Margin, Border or Padding properties to control how components are laid out. The following image is a useful reference explaining how each property works.