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

Row

Row Piece.png

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...

Row.png

Left

Left Piece.png

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

Left.png

Right

Right Piece.png

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

Right.png

Multiple Left &  Right

Left Left Right Right Piece.png

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).

Left Left Right Right.png

Middle

Middle Piece.png

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

Middle.png

Left, Middle & Right

Left Middle Right Piece.png

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.

Left Middle Right.png

Multiple Middles

Left Middle Middle Right Piece.png

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.

Left Middle Middle Right.png

Shrink-width Box

Shrink-width Box Pieces.png

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.

Shrink-Width Box.png

Vertical Scrolling Box

Vertical Scrolling Box Piece.png

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.

Vertical Scrolling Box.png

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.

difference-between-margin-padding-css-pr