Layout Box Model

For more information, see Layouts.

The different sized boxes laid out on a standard 12 column grid. From top to bottom 2 half, 1 full and 4 quarter page sized boxes.

Every layout in unroole follows a simple box model that is used to organize the various content that is presented on the page. Each layout is composed of the following elements:

• Layout Properties - Used to configure the basics of a layout.
• Sections - Sub divide page for easier styling
• Boxes - Used for laying out content on a page and contain widgets.
• Widgets - Provide different mechanisms for adding content to the page.

These layout elements are then positioned using css either from the system or by the contents of a theme. Each of the elements of a layout are presented in a simple hierarchy presented below:

• Layout Containing Object (Page, Channel Layout)
  • Section
    • Box
      • Widgets
    • Box
      • Widgets
    • ...
  • Section
  • ...

Every section of the layout subdivides a full page providing the user with a mechanism for grouping horizontally related page elements for either design or logical reasons. Next is the box whose size is based on the size of the page and the number of columns within it. Boxes can also expand vertically to encompass content held within them. Lastly are the widgets which holds the content within a box.

Displaying the 'content' box type used on a simple un-styled channel layout.

Some layouts may also provided special boxes with specific functionality. One such box is the 'content' box used as part of a channel layout. This box tells each channel layout where the page content should be provided when displayed to the end user.