Layouts

Layouts are simple JSON specifications based on the Bootstrap grid. They are used by the front-end framework to generate the appropriate page layout.

A layout is defined by loading a JSON file. A few layouts are created automatically during platform seeding from the files in gbe/resources/definitions/layouts. New layouts can be added from the system administration Layouts tab (i.e., new layouts may only be added by a platform superuser).

The format of the layout file is simple. It consists of a name, description, and a set of rows and columns. Each column should have an ID (for use in mapping components) and a class definition that specifies the Bootstrap grid classes (and any others that are relevant).

Here is the specification of the Three-Part layout:

{
  "name":"Three-Part",
  "description":"A simple layout for illustration purposes.",
  "rows": [
    {
      "columns": [
        {
          "id":"TopLeft",
          "class":"col-xs-5 text-danger bg-danger"
        },
        {
          "id":"TopRight",
          "class":"col-xs-7"
        }
      ]
    },
    {
      "columns": [
        {
          "id":"Bottom",
          "class":"col-xs-12"
        }
      ]
    }
  ]
}

This generates the following layout:

The addition of txt-danger and bg-danger classes to one of the cells is just to illustrate than any class may be added to a cell in a layout, not just bootstrap grid classes.