The Templator Page

The outermost div#page is called the Page node. This node will typically be extended with JavaScript to act as an overall page flow controller. It can be a simple controller handling one or two dynamic elements in the footer or header or and complicated controller taking care of AJAX based navigation and content loading, updating navigation and so forth. The Manipulator JavaScript library offers a complete Page controller designed for Templator.

A standard Templator Page contains the four primary shell nodes, div#header, div#content, div#navigation and div#footer. The order is not random. The content actually goes before the navigation. Think about it - when someone navigates to a page, would it be safe to assume that they are more more interested in the content than the navigation? This is especially evident on the mobile phone, where the user probably don't want to scroll through a huge navigation before reaching the content.

Think structure, not design.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Templator - Markup Documentation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="keywords" content="HTML, JavaScript, CSS, framework, SEO" />
	<meta name="description" content="Details do matter" />
	<meta name="viewport" content="initial-scale=1, user-scalable=no" />
</head>

<body>

<div id="page">

	<div id="header"></div>
	<div id="content"></div>
	<div id="navigation"></div>
	<div id="footer"></div>

</div>

</body>
</html>