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
Row
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...
Left
The Left piece will arrange its contained components to the left side of a row.
Right
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).
Middle
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.
