Difference between revisions of "Layout Box Model"

From unroole CMS wiki
Jump to: navigation, search
(Created page with "<noinclude> {{for|more information|Layouts}} </noinclude> {{Css Image Crop |Image = Layout Editor Box Model.png |bSize = 300px |cWidth = 300 |cHeight = 167 |Locatio...")
 
Line 12: Line 12:
 
}}
 
}}
  
Every layout in unroole follows a simple box model that is used to organize the various content that is presented on the page. These layout elements are then positioned using css either from the system or the theme.
+
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]]
 +
* [[Layout Sections|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.
  
A layout hierarchy is broken down as such.
+
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 ([[Pages|Page]], [[Channel Layouts|Channel Layout]])
 
* Layout Containing Object ([[Pages|Page]], [[Channel Layouts|Channel Layout]])
Line 26: Line 30:
 
** Section
 
** 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.
 +
 +
{{Css Image Crop
 +
  |Image = Layout editor content box of channel layout.png
 +
  |bSize = 300px
 +
  |cWidth = 300
 +
  |cHeight = 167
 +
  |Location = right
 +
  |Description = Displaying the 'content' box type used on a simple un-styled channel layout.
 +
}}
 +
 +
Some layouts may also provided special boxes which provided 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.
  
 
{{clear}}
 
{{clear}}

Revision as of 10:49, 10 July 2012


Layout Editor Box Model.png

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
  • 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.

Layout editor content box of channel layout.png

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

Some layouts may also provided special boxes which provided 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.