Difference between revisions of "Layout Structure"

From unroole CMS wiki
Jump to: navigation, search
m
Line 29: Line 29:
 
If you are working directly with the DOM it is useful to know which classes and id's are automatically generated by the system for use by theme builders or through stylesheets. The table below lists the various attributes, what element they are included in and their purpose.
 
If you are working directly with the DOM it is useful to know which classes and id's are automatically generated by the system for use by theme builders or through stylesheets. The table below lists the various attributes, what element they are included in and their purpose.
  
 +
Common Classes
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
−
! Type Attribute
 
 
! Format
 
! Format
 
! Example
 
! Example
Line 37: Line 37:
 
! Purpose
 
! Purpose
 
|-
 
|-
−
| id
 
−
| ulay_xxx
 
−
| ulay_506
 
−
| [[Pages]], [[Channel Layouts]]
 
−
| Derived from the id of the page or channel layout containing the layout.
 
−
|-
 
−
| id
 
−
| ul_xxx
 
−
| ul_865
 
−
| [[Layouts]]
 
−
| A unique identifier for this specific version of the layout. Useful for targeting different revisions of a layout.
 
−
|-
 
−
| class
 
 
| ul
 
| ul
 
|
 
|
Line 55: Line 42:
 
| Indicates the beginning of a layout. If directly after the body then can be considered the primary channel layout of page. If nested deeper than this is the content layout of the page.
 
| Indicates the beginning of a layout. If directly after the body then can be considered the primary channel layout of page. If nested deeper than this is the content layout of the page.
 
|-
 
|-
−
| class
+
| ub
−
| grid
+
|  
−
|
+
| [[Boxes]]
−
| [[Layouts]]
+
| Used on any box elements.
−
| Indicates the beginning of of a new unroole grid.
+
 
|-
 
|-
−
| id
+
| us
−
| ub_0_usl
+
 
|  
 
|  
 
| [[Sections]]
 
| [[Sections]]
−
| A unique identifier indicating the first section of the channel layout on a rendered page.
+
| Used on any section elements.
 
|-
 
|-
−
| id
+
| ucl
−
| ub_0_up
+
 
|  
 
|  
−
| [[Sections]]
+
| [[Channel Layouts]]
−
| A unique identifier indicating the first section of the page content on a rendered page.
+
| Used on any channel layouts.
 +
|-
 +
| up
 +
|
 +
| [[Pages]]
 +
| Used on any page layouts.
 +
|-
 +
| ub_xxxxx
 +
| ub_content, ub_box, ub_divider
 +
| [[Boxes]]
 +
| A class used to identify a specific category of boxes such as content, dividers or normal boxes.
 +
|-
 +
| grid_x_xx
 +
| grid_0_25, grid_1_0, grid_0_10
 +
| [[Boxes]]
 +
| Used for styling purposes to indicate the type of column width that this box takes up as part of the page. Everything is done in 3 digit rounded percentages. ex: 0_25 = 25% of layout width, 1_0 = 100% of layout width, 0_10 = 10% of layout width. Note that this may not apply if the number of column of a layout is changed without changing the box width.
 +
|}
 +
 
 +
Extended Classes
 +
{| class="wikitable"
 +
|-
 +
! Format
 +
! Example
 +
! Elements
 +
! Purpose
 +
|-
 +
| grid
 +
|
 +
| [[Layouts]]
 +
| Indicates the beginning of of a new unroole grid.
 
|-
 
|-
−
| class
 
 
| ub_section
 
| ub_section
 
|  
 
|  
Line 79: Line 91:
 
| A simple class indicating a section sub-division.
 
| A simple class indicating a section sub-division.
 
|-
 
|-
−
| class
 
 
| containers
 
| containers
 
|  
 
|  
Line 85: Line 96:
 
| The first element inside any [[Sections|section]] to be used for styling purposes.
 
| The first element inside any [[Sections|section]] to be used for styling purposes.
 
|-
 
|-
−
| id
+
| inner_box
−
| ub_xxx
+
−
| ub_5176
+
−
| [[Boxes]]
+
−
| A unique identifier for this box based on the box properties.
+
−
|-
+
−
| class
+
−
| ub
+
 
|  
 
|  
 
| [[Boxes]]
 
| [[Boxes]]
−
| Used on any box elements.
+
| Used within a box for styling purposes.
 +
|}
 +
 
 +
Common ID's
 +
{| class="wikitable"
 
|-
 
|-
−
| class
+
! Format
−
| ub_xxxxx
+
! Example
−
| ub_content, ub_box, ub_divider
+
! Elements
−
| [[Boxes]]
+
! Purpose
−
| A class used to identify a specific class of boxes such as content, dividers or normal boxes.
+
 
|-
 
|-
−
| class
+
| ulay_xxx
−
| inner_box
+
| ulay_506
 +
| [[Pages]], [[Channel Layouts]]
 +
| Derived from the id of the page or channel layout containing the layout.
 +
|-
 +
| ul_xxx
 +
| ul_865
 +
| [[Layouts]]
 +
| A unique identifier for this specific version of the layout. Useful for targeting different revisions of a layout.
 +
|-
 +
| ub_0_usl
 
|  
 
|  
−
| [[Boxes]]
+
| [[Sections]]
−
| Used within a box for styling purposes.
+
| A unique identifier indicating the first section of the channel layout on a rendered page.
 
|-
 
|-
−
| class
+
| ub_0_up
−
| grid_x_xx
+
|  
−
| grid_0_25, grid_1_0, grid_0_10
+
| [[Sections]]
 +
| A unique identifier indicating the first section of the page content on a rendered page.
 +
|-
 +
| ub_xxx
 +
| ub_5176
 
| [[Boxes]]
 
| [[Boxes]]
−
| Used for styling purposes to indicate the type of column width that this box takes up as part of the page. Everything is done in 3 digit rounded percentages. ex: 0_25 = 25% of layout width, 1_0 = 100% of layout width, 0_10 = 10% of layout width. Note that this may not apply if the number of column of a layout is changed without changing the box width.
+
| A unique identifier for this box based on the box properties.
 
|}
 
|}
  
 
{{clear}}
 
{{clear}}

Revision as of 12:25, 10 July 2012

For more information, see Layouts.


Layout HTML structure example.png

A simple example page to illustrate the structure of an unroole layout.

Layout HTML structure.png

The first bit of html produced for the page displayed above.

Whether or not you are designing a Theme or adding stylesheet or javascript elements to a channel it is useful to know the structure and markup of the HTML code generated by a layout. This code is the same for every layout in the system whether it is generated from a page or channel layout.

On the right are two screeenshots which illustrate a fully formed page and the first part of the generated HTML code for that page. The rendered HTML markup gives many different areas for you to reference when digging deep into the HTML/CSS/JS of a layout.

If you are working directly with the DOM it is useful to know which classes and id's are automatically generated by the system for use by theme builders or through stylesheets. The table below lists the various attributes, what element they are included in and their purpose.

Common Classes

Format Example Elements Purpose
ul Layouts Indicates the beginning of a layout. If directly after the body then can be considered the primary channel layout of page. If nested deeper than this is the content layout of the page.
ub Boxes Used on any box elements.
us Sections Used on any section elements.
ucl Channel Layouts Used on any channel layouts.
up Pages Used on any page layouts.
ub_xxxxx ub_content, ub_box, ub_divider Boxes A class used to identify a specific category of boxes such as content, dividers or normal boxes.
grid_x_xx grid_0_25, grid_1_0, grid_0_10 Boxes Used for styling purposes to indicate the type of column width that this box takes up as part of the page. Everything is done in 3 digit rounded percentages. ex: 0_25 = 25% of layout width, 1_0 = 100% of layout width, 0_10 = 10% of layout width. Note that this may not apply if the number of column of a layout is changed without changing the box width.

Extended Classes

Format Example Elements Purpose
grid Layouts Indicates the beginning of of a new unroole grid.
ub_section Sections A simple class indicating a section sub-division.
containers Sections The first element inside any section to be used for styling purposes.
inner_box Boxes Used within a box for styling purposes.

Common ID's

Format Example Elements Purpose
ulay_xxx ulay_506 Pages, Channel Layouts Derived from the id of the page or channel layout containing the layout.
ul_xxx ul_865 Layouts A unique identifier for this specific version of the layout. Useful for targeting different revisions of a layout.
ub_0_usl Sections A unique identifier indicating the first section of the channel layout on a rendered page.
ub_0_up Sections A unique identifier indicating the first section of the page content on a rendered page.
ub_xxx ub_5176 Boxes A unique identifier for this box based on the box properties.
Retrieved from "https://wiki.unroole.com/index.php?title=Layout_Structure&oldid=1407"