User Guide

YAML XHTML/CSS Page Display Structure

YAML’s Layout Skeleton is integrated into eeSiteKit’s default display templates. You may use this as a display structure for your own hand-coded CSS, or you find the YAML Builder a good starting point.

If you are brand new to YAML or have previous experience with the 960 Grid system or Yahoo Grids and are not sure where to start, we recommend you review YAML’s Variable Order Content Columns, Subtemplates and Flexible Grids documentation before you attempt to use the YAML Builder. 

<body>
<div class="page_margins">
	<div class="page">
		<div id="header">
			<div id="topnav">
				
				[TOP NAVIGATION]
				
			</div>{!-- END TOPNAV --}
			
		</div>{!-- END HEADER --}
		
		<div id="nav">
			
			<div id="nav_main" class="clearfix">

				[NAVIGATION MAIN ROW - TABS]

			</div>{!-- END NAV MAIN --}
			
		</div>{!-- END NAV --}

	<div id="main">

		<div id="col1">
			<div id="col1_content" class="clearfix">
				
				[COLUMN 1 CONTENT]

			</div>{!-- END COL1_CONTENT --}
      	</div>{!-- END COL1 --}

		<div id="col2">
			<div id="col2_content" class="clearfix">
				
				[COLUMN 2 CONTENT]
				
			</div>{!-- END COL2_CONTENT --}
		</div>{!-- END COL2 --}

		<div id="col3">
			<div id="col3_content" class="clearfix"> 
				
				[COLUMN 3 CONTENT]
			
			</div>{!-- END COL3_CONTENT --}{!-- IE column clearing --}<div id="ie_clearing"> </div>
		</div>{!-- END COL3 --}
		
	</div>{!-- END MAIN --}

		<div id="footer">

			[FOOTER CONTENT]

		</div>{!-- END FOOTER --}
	</div>{!-- END PAGE --}
</div>{!-- END PAGE MARGINS --}

</body>
</html>