11
Layout
Page & System grid
The page is composed of any number of elements, it occupies the full width of the browser window. A system grid for positioning elements is built automatically during the construction of the page.
A system cell is a cell of that grid.
The grid columns can be resized in percentage, according to the page layout. The modifiable separations are marked by a vertical grey bar which appears to the passage of the mouse and can be moved to resize the width of the cell. The selected column is the one on the clicked side of the bar.
Width
The elements are rectangular and generally occupy the full width available in the cell. Some of them have a fixed width, such as images or blocks the width of which has been fixed.
The page covers by definition the width of the browser window, it may contain an arbitrary number of blocks of fixed width; if all its content is encapsulated in a block of fixed width, the visitor will see it as a fixed width page; to produce more sophisticated effects we can for example set the width of the body of the page and leave the header and footer elastic, or set minimum and / or maximum width for certain parts.
Resize the width of your browser window to see the behavior on this page or the example >>.
Height
Cell height
The height of the cells is determined by the browser, based on the content and available space. The main cell occupies the entire window, even if the content is smaller. Depending on the browser it can reveal differences in relative heights, especially visible between Chrome and Firefox.
Cell creation
A new cell is created either by drag and drop to a red target, or by creating a new element to the right or left of the selected element (Create, delete, move an element >>).
For example, one way to put a footer at the bottom of the screen is to drag the desired item to a red line in extreme bottom of the page, below the main cell.
Full height block
The height of a block can be set so as to occupy the full height in the cell that contains it, the other elements then being pushed up or down. Several blocks in the same cell can share the height of the cell, with no space between them except the margins value.
Resize your browser window to see the behavior of the page example >>.
See also
