Builder CSS: Basic Structure

(Difference between revisions)
Jump to: navigation, search
(Using Firefox 3D View)
(Builder's Construction of CSS Wrappers)
Line 77: Line 77:
 
|-
 
|-
 
|}
 
|}
 +
 +
<br />
  
 
=Outline Example=
 
=Outline Example=

Revision as of 16:36, July 29, 2013

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
[builder-container-background-wrapper]
[builder-container-outer-wrapper]
[builder-container] #ID
[builder-module-backgroud-wrapper]
[builder-module-outer-wrapper]
[builder-module] #ID
[builder-module-block-outer-wrapper]
[builder-module-block]
[builder-module-element]


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


3D-Builder.png


See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox