Understanding Layout Template Container Terms and Concepts

This topic describes terms and concepts associated with managing layout template containers.

Layout Template Comments

Many of the pages you use to manage layout templates contain Comments fields.

As you create and manage containers it is important for you to include as much information as possible in the Comments fields, because they are included in the generated CSS file. And more importantly, developers can use the information to determine if a given container or container selector should be used in his or her layout.

Containers

Containers define the sections of an application page. At a minimum, you must define a main container when you create a layout template.

Container Selectors and Selector Properties

Container selectors and selector properties comprise a style rule set.

Container selectors are equivalent to CSS3 selectors.

Selector properties are equivalent to CSS declaration blocks. A selector property consists of a declaration property and its defined value.

The use of container selectors and properties depends on your mobile application requirements and are optional.

This table lists container selectors supported by the Mobile Application Platform framework and shows the selector naming convention when defining the selector name.

Selector Type	Naming Convention for Selector Name
Attribute	The selector name is contained in brackets ( [ ] ). For example: `[selector_name]`
Class	The selector name is prefaced by a period ( . ). For example: `.<selector_name>`
Contextual	The format for this selector is: `<context><space><element>` For example: `h1 em` Given this example the styles defined in the selector properties are applied to the `em` element found in the `h1` element.
Type	The element type to which the rule set applies is the selector name. For example: `span` In this example, the style properties defined for the selector with the name `span` apply to all content within the span element.
ID	The selector name is prefaced by a hash (#). For example: `#<selector_name>`
Psuedo-element	The selector name is prefaced by a colon (:). For example: `:<selector_name>`

Blob Properties

Blob properties enable you to define a block of CSS3 styles as a single selector property.

Container Elements

Container elements are the default page elements that you define for a container.

The page elements that you can define for a container are:

Action sheet.
Button.
Check box.
HTML area.
Image.
Static text.
Input box.
List view.
Mobile grid.
Radio button.
Select box.
Select menu.
Sidebar.
Static text.
Table.
Toggle.
URL.

Themes

jQuery Mobile themes control specific visual elements such as fonts, colors, gradients, shadows, and corners.

The Mobile Application Platform framework enables you to apply the default JQuery Mobile theme and its default color swatches to user interface elements in a layout template.

A color swatch is defined by letters, a to z. The default theme used for layout templates include swatches a to e.

This table lists and describes the default color swatches available in the Template Designer:

Letter	Description	Color
`a`	Highest level of visual priority.	Black.
`b`	Secondary level of visual priority.	Blue.
`c` (Default.)	Baseline level.	Silver.
`d`	Alternate secondary level.	Gray.
`e`	Accent.	Yellow.

You can also create custom themes using jQuery ThemeRoller.