Grid Layout

The Grid layout is here to help you align blocks and widgets into columns and rows in a specific area. By following a pattern made of containers with CSS classes, you will easily design your customized tab content, keeping a visual consistency, readablity, and adaptability between screens.

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:

.gridContainer

.gridRow

.gridBox.gridStyle6
.gridBox.gridStyle6
.gridBox.gridStyle4
.gridBox.gridStyle4
.gridBox.gridStyle4

.gridRow

.gridBox.gridStyle12

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.

Example: The Summary View

The best example of the grid usage is the summary view of a document. You can design your layouts from the Tab feature of Nuxeo Studio.

This layout contains one .gridRow in the .gridContainer. The .gridRow holds two .gridBox divs: .gridStyle7 + .gridStyle5. The .gridStyle7 div contains one widget for the picture, the .gridStyle5 div contains four widgets.

Sea in Chile

Contributors

Lise Kemen

Associated tags

boat sea

Content

sea_in_chile.jpg 5 MB
Download
To have a blue box widget, you can use the class .coloredWidget