#Building layouts

Layouts define the partition of the content display into rows and columns, using a 12-column grid system.

The layout management screen

Clicking on the "Layouts" admin menu entry takes the user to the layout management screen.

From this screen, you can see the list of existing layouts (layouts are displayed as a title for the moment, but soon a preview of the layout will be visible instead). You can also delete a layout from this screen.

Clicking on the title of one of the layouts, or on the "Create New Layout" button takes you to the layout editor.

The layout editor

The layout editor is partitioned into two zones: a tree representation of the row and column elements of the layout on the left (1), and a preview of the layout on the right (2):

On the right side of the tree (1), you can find the toolbox of available elements (3). Available elements by default for layouts are rows and columns.

On the bottom of the tree (1) are three tabs (4) that enable the user to switch from the default "Elements" representation to the global properties of the layout (Layout tab), or to the XML representation of the layout (XML tab).

The tree and XML views of the layout are both editable, and all changes will be instantly reflected by the preview (2).

The tree

The tree view of the layout gives a visual representation of its hierarchy of rows and columns. Elements can enter edit mode when the user clicks their representations either in the tree or in the preview.

It is also possible to view the editors for all elements at once by clicking the '+' icon in the toolbox. To revert back to the default view where at most one editor is open at a time, click the '-' icon that replaced the '+' when you clicked it.

Elements can be deleted by selecting them, then clicking "Delete" on the top-right of the editor, then clicking "Confirm".

Elements can be moved around the tree using simple drag and drop gestures. The tree being a hierarchical structure, you may have in some cases to drag an element to the left or right in order to put it under the right parent.

If you encounter difficulties in getting the exact result you're after, you can always switch to the XML tab and edit the XML representation of the layout directly:

Editing rows

A row on its own is not very useful. You'll need to add at least one column. This can be done by selecting the row in the tree, and then by clicking the column icon in the toolbox once for each desired column. If you click it three times for example, you'll get three columns inserted into the row. A row can contains between one and twelve columns, because Onestop Layouts is built on a twelve column grid.

The columns will automatically adjust their spans to fit the grid as well as possible, sharing the available space as well as it can while respecting the twelve column grid. This means that three columns will each take a span of four. If you have five columns, the first three will each take a span of two, and the last two will each take a span of three, for a total of twelve, always.

The spans for the columns can be adjusted from the row editor. In order to do so, select the row, and then move the dials that represent the boundaries between the columns.

The span of columns can also be edited from the column editor, or from the XML view.

###Editing columns

The span of a column can be edited from the column editor, that can be obtained by clicking the row in the tree or in the preview. When changing the span of a column, the editor will adjust the span of its neighbors in order to maintain a total span of twelve.

Another parameter that columns expose is the offset. This can be used to introduce gaps in the layout, if you want some columns to be unused. Adjusting the offset will change the span by an equal and opposite amount, in order to maintain the total width of the column the same, and maintain the total width of all columns to twelve.

###Layout properties

The layout properties tab enables the user to set fixed widths and heights for layouts (not recommended), and to add top-level CSS classes, in order to facilitate styling.

##Preview

The layout preview is a visualization of the layout that is updated as you perform changes in the element tree.

The preview can be zoomed into using the scale that is on the bottom left. It can also be dragged around, which is mostly useful when zooming. The two buttons on the bottom right can be used to restore the zoom level to 100%, and to fit the view to the window.

The preview is extremely useful as visualization, but it is also a great selection tool. On complex layouts, it can be tricky to find the element you're looking for in the tree, and clicking on the representation of the element in the preview is often much easier and faster. Selecting an element on the preview will open its editor in the tree, and will scroll it into view if necessary.