Builder CSS: Basic Structure
Contents
Builder's Construction of CSS Wrappers
The following is a basic outline of Builder's construction of CSS wrappers. For individual module construction, see the Individual Module section below.
[BODY] #ID
|
For Example:
| Output (IDs are examples) | |
|---|---|
| [BODY] #ID | #builder-layout-51d70c106ac69 |
| [builder-container-background-wrapper] | .builder-container-background-wrapper |
| [builder-container-outer-wrapper] | .builder-container-outer-wrapper |
| [builder-container] #ID | #builder-container-51d70c106ac69 |
| [builder-module-backgroud-wrapper] | .builder-module-background-wrapper |
| [builder-module-outer-wrapper] | .builder-module-outer-wrapper |
| [builder-module] #ID | #builder-module-51d70c106ab33 |
| [builder-module-block-outer-wrapper] | .builder-module-block-outer-wrapper |
| [builder-module-block] | .builder-module-block |
Outline Example
[BODY] #ID
[builder-container-background-wrapper]
[builder-container-outer-wrapper]
- - - - [builder-container] #ID
- - - - - - [MODULE]
- - - - - - - - [builder-module-background-wrapper]
[builder-module-outer-wrapper]
[builder-module-block-outer-wrapper]
. [builder-module-block]
. [/]
[/]
[builder-module-block-outer-wrapper]
[builder-module-block]
[/]
[/]
Using Firefox 3D View
To see a 3-dimensional view of the Module classes and IDs that compose a page, use Firefox and Inspect Element. Click the 3D View icon. Pan and zoom to see the location of different elements.
