Containers construction

Your layout must contain the following elements:

• A .gridContainer div, containing several vertical .gridRow div.
• Each .gridRow contains several horizontal .gridBox.
• A .gridBox div may contain several vertical .widgetPanel.
• Each .gridBox div has a secondary .gridStyle** class to define its width.

The .gridStyle** classes represent the width of each .gridBox container. The sum of all the .gridBox in a .gridRow line must always be equal to 12.

A 12-column based grid

The grid model included in the Nuxeo Platform styles is a 12-column based model. It means that the sum of the .gridStyle** classes, where ** are numbers from 1 to 12, in a single .gridRow must be equal to 12. Here are some examples of .gridStyle** classes that you can use to define the width of each .gridBox:

• .gridStyle12 = a 100% width layout
• .gridStyle6 + .gridStyle6 = a 50% / 50% layout
• .gridStyle8 + .gridStyle4 = a 66% / 33% layout
• .gridStyle4 + .gridStyle4 + .gridStyle4 = a 33% / 33% / 33% layout
• .gridStyle6 + .gridStyle3 + .gridStyle3 = a 50% / 25% / 25% layout
• .gridStyle3 + .gridStyle3 + .gridStyle3 + .gridStyle3 = a 25% / 25% / 25% / 25% layout
• …

Containers structure

Let's say you need a layout with 2 rows:

• a 50% / 50% width layout + a 33% / 33% / 33% width layout for the first one,
• a 100% width layout for the second one.

This is how your layout must be constructed:

Containers specifications

.gridContainer

It is the main container of all your layout. No margins and padding, it is only a frame that will encompass your rows.

.gridRow

No padding and margins either, the .gridRow will shelter each block you want to add. At the end of all the .gridRow, don't forget to add a div class="clear" closing tag to stop the .gridBox imbrication.

.gridBox

This class only defines the floating behavior of each box, allowing them to move down if the space is missing.

.gridStyle**

This secondary class must be added to each .gridBox to define the width.

.widgetPanel

This class will handle the space between the .gridBox divs.