+ (no conditions)
// 1. Setup the Page
First, create the page where the layout will live.
-> EasyMenu: Add page "WebLayout"
-> EasyMenu: Set page "WebLayout" height to 800
-> EasyMenu: Set page "WebLayout" width to 600
-> EasyMenu: Set current page to "WebLayout" with Instant transition (Linear tween, 0.5s), dynamic scrollbars False
----+ (no conditions)
----// 2. Create the Root Container
This acts as the <body> tag, stacking items vertically (Header, then Body, then Footer).
-----> EasyMenu: Create Column layout group "Root" in page "WebLayout" (parent: "")
-----> EasyMenu: Set item "Root" props in page "WebLayout": width -1, height -1, grow 1
----+ (no conditions)
----// 3. The Header
-----> EasyMenu: Create Column layout group "Header" in page "WebLayout" (parent: "Root")
-----> EasyMenu: Set item "Header" props in page "WebLayout": width -1, height 120, grow 0
-----> EasyMenu: Set group "Header" style in page "WebLayout": bg "26,188,156,1", gap 20, pad 0x0, align Center, justify Center
----// Add Text to Header
-----> EasyMenu: Add text "H1" to page "WebLayout": "My Header Text" (Font: "Arial", Size: 25, Color: "255,255,255", Bold: True, Italic: False, Wrap: False)
-----> EasyMenu: Add element "H1" to layout group "Header" in page "WebLayout"
-----> EasyMenu: Add text "H2" to page "WebLayout": "Resize menu window..." (Font: "Arial", Size: 16, Color: "255,255,255", Bold: False, Italic: False, Wrap: False)
-----> EasyMenu: Add element "H2" to layout group "Header" in page "WebLayout"
----+ (no conditions)
----// 4. The Navigation Bar (Black Box)
-----> EasyMenu: Create Row layout group "NavBar" in page "WebLayout" (parent: "Root")
-----> EasyMenu: Set item "NavBar" props in page "WebLayout": width -1, height -1, grow 0
-----> EasyMenu: Set group "NavBar" style in page "WebLayout": bg "51,51,51,1", gap 20, pad 50x15, align Stretch, justify Start
--------+ System: Repeat 4 times
--------// // Add Links
---------> EasyMenu: Add text "Link"&LoopIndex+1 to page "WebLayout": "Link "&LoopIndex+1 (Font: "Arial", Size: 16, Color: "255,255,255", Bold: False, Italic: False, Wrap: False)
---------> EasyMenu: Add element "Link"&LoopIndex+1 to layout group "NavBar" in page "WebLayout"
----+ (no conditions)
----// 5. The Content Body (Row Container)
-----> EasyMenu: Create Row layout group "ContentBody" in page "WebLayout" (parent: "Root")
-----> EasyMenu: Set item "ContentBody" props in page "WebLayout": width -1, height -1, grow 1
----+ (no conditions)
----// 6. The Columns (Side & Main)
----// Side Column (Left)
-----> EasyMenu: Create Column layout group "SideCol" in page "WebLayout" (parent: "ContentBody")
-----> EasyMenu: Set item "SideCol" props in page "WebLayout": width 60, height -1, grow 1
-----> EasyMenu: Set group "SideCol" style in page "WebLayout": bg "241,241,241,1", gap 20, pad 20x50, align Stretch, justify Start
----// title text
-----> EasyMenu: Add text "SideTitle" to page "WebLayout": "About Me" (Font: "Arial", Size: 20, Color: "0,0,0", Bold: True, Italic: False, Wrap: False)
-----> EasyMenu: Add element "SideTitle" to layout group "SideCol" in page "WebLayout"
----// photo label
-----> EasyMenu: Add text "SideDesc" to page "WebLayout": "Photo of me: " (Font: "Arial", Size: 14, Color: "0,0,0", Bold: False, Italic: False, Wrap: False)
-----> EasyMenu: Add element "SideDesc" to layout group "SideCol" in page "WebLayout"
----// fake image box
-----> EasyMenu: Create Column layout group "SideImgBox" in page "WebLayout" (parent: "SideCol")
-----> EasyMenu: Set item "SideImgBox" props in page "WebLayout": width -1, height 100, grow 0
-----> EasyMenu: Set group "SideImgBox" style in page "WebLayout": bg "170,170,170,1", gap 0, pad 10x10, align Start, justify Start
-----> EasyMenu: Add text "SideImgLbl" to page "WebLayout": "Image" (Font: "Arial", Size: 14, Color: "0,0,0", Bold: False, Italic: False, Wrap: False)
-----> EasyMenu: Add element "SideImgLbl" to layout group "SideImgBox" in page "WebLayout"
----// more text
-----> EasyMenu: Add text "SideMore" to page "WebLayout": "Hello World. This is some text about me. This has word wrap applied. This is some more text." (Font: "Arial", Size: 14, Color: "0,0,0", Bold: False, Italic: False, Wrap: True)
-----> EasyMenu: Add element "SideMore" to layout group "SideCol" in page "WebLayout"
--------+ System: Repeat 3 times
---------> EasyMenu: Create Column layout group "SubImgBox"&LoopIndex in page "WebLayout" (parent: "SideCol")
---------> EasyMenu: Set item "SubImgBox"&LoopIndex props in page "WebLayout": width -1, height 50, grow 0
---------> EasyMenu: Set group "SubImgBox"&LoopIndex style in page "WebLayout": bg "170,170,170,1", gap 0, pad 0x0, align Center, justify Center
---------> EasyMenu: Add text "SubImgLbl"&LoopIndex to page "WebLayout": "Image" (Font: "Arial", Size: 14, Color: "0,0,0", Bold: False, Italic: False, Wrap: False)
---------> EasyMenu: Add element "SubImgLbl"&LoopIndex to layout group "SubImgBox"&LoopIndex in page "WebLayout"
--------// create 3 fake images
----+ (no conditions)
----// Main Column (Right)
-----> EasyMenu: Create Column layout group "MainCol" in page "WebLayout" (parent: "ContentBody")
-----> EasyMenu: Set item "MainCol" props in page "WebLayout": width 0, height -1, grow 3
-----> EasyMenu: Set group "MainCol" style in page "WebLayout": bg "255,255,255,1", gap 20, pad 20x50, align Stretch, justify Start
----// heading text
-----> EasyMenu: Add text "MainH1" to page "WebLayout": "HEADING" (Font: "Arial", Size: 24, Color: "0,0,0", Bold: True, Italic: False, Wrap: False)
-----> EasyMenu: Add element "MainH1" to layout group "MainCol" in page "WebLayout"
----// title text
-----> EasyMenu: Add text "MainDesc" to page "WebLayout": "Title description, December 7, 2017. " (Font: "Arial", Size: 14, Color: "100,100,100", Bold: False, Italic: False, Wrap: False)
-----> EasyMenu: Add element "MainDesc" to layout group "MainCol" in page "WebLayout"
----// main body text
-----> EasyMenu: Add text "MainBody" to page "WebLayout": "Some text..."&newline&newline&"This is a test of the text. This is a test of the text. This is a test of the text. This is a test of the text. This is a test of the text." (Font: "Arial", Size: 14, Color: "0,0,0", Bold: False, Italic: True, Wrap: True)
-----> EasyMenu: Add element "MainBody" to layout group "MainCol" in page "WebLayout"
----// fake image box
-----> EasyMenu: Create Column layout group "MainImgBox" in page "WebLayout" (parent: "MainCol")
-----> EasyMenu: Set item "MainImgBox" props in page "WebLayout": width 0, height 300, grow 0
-----> EasyMenu: Set group "MainImgBox" style in page "WebLayout": bg "170,170,170,1", gap 0, pad 10x10, align Start, justify Start
-----> EasyMenu: Add text "MainImgLbl" to page "WebLayout": "Image" (Font: "Arial", Size: 14, Color: "0,0,0", Bold: False, Italic: False, Wrap: False)
-----> EasyMenu: Add element "MainImgLbl" to layout group "MainImgBox" in page "WebLayout"
----// more body text
-----> EasyMenu: Add text "MainBody1" to page "WebLayout": "This is a test of the text. This is a test of the text. This is a test of the text. This is a test of the text. This is a test of the text." (Font: "Arial", Size: 14, Color: "0,0,0", Bold: False, Italic: True, Wrap: True)
-----> EasyMenu: Add element "MainBody1" to layout group "MainCol" in page "WebLayout"
----+ (no conditions)
----// 7. The Footer
-----> EasyMenu: Create Row layout group "Footer" in page "WebLayout" (parent: "Root")
-----> EasyMenu: Set item "Footer" props in page "WebLayout": width -1, height 50, grow 0
-----> EasyMenu: Set group "Footer" style in page "WebLayout": bg "221,221,221,1", gap 0, pad 0x0, align Stretch, justify Start