UI Building Blocks

Next

Base Template

Overview

The base template is a single reusable template which is intended for every page. The base template consists of the items listed below.

  • HTML5 DOCTYPE declaration
  • HTML root element and attributes
  • HEAD element
  • TITLE element for the Browser
  • META elements and values
  • BODY element
  • HEADER element
  • MAIN bounding element
  • FOOTER element

HTML5 DOCTYPE

The HTML5 DOCTYPE starts any and all HTML5 documents in the Toolit markup. This should always be placed on the first line of any and all HTML5 documents. The DOCTYPE is required and tells the browsers what type of document is being presented.

<!DOCTYPE html>

Begin HTML Element

The next element in the base template is the <html> tag. This needs to follow immediately after the HTML5 DOCTYPE and is the root of the HTML5 document. The closing </html> tag will be at the end of the HTML5 document.

<!-- BEGIN HTML Element --><html class='no-js' lang='en-us'>

HTML Head Section

<!-- BEGIN Head Element --><head><break> <title>Title goes here</title>

<!-- BEGIN Required Meta Tags --><meta http-equiv='X-UA-Compatible' content='IE=edge'/><break><meta http-equiv='content-type' content='text/html; charset=UTF-8'/><break><meta name='viewport' content='width=device-width, user-scalable=yes'/><!-- END Required Meta Tags -->

<!-- BEGIN Stylesheets --><link rel='stylesheet' href='../../styles/rdt.css' media='all'/><break><link rel='stylesheet' href='../../styles/rdt-1.css' media='all'/><break><link rel='stylesheet' href='../../styles/rdt-typo.css' media='all'/><!-- END Stylesheets -->

<!-- BEGIN CaaS HF Service --><script src='http://www8.hp.com/us/en/scripts/framework/jquery/v-1-8/jquery.js' type='text/javascript'>//</script><break><script src='http://www8.hp.com/us/en/scripts/framework/jquery/v-1-8/can.jquery.js' type='text/javascript'>//</script><break><script src='http://www8.hp.com/caas/header-footer/us/en/default/latest.r/root?contentType=js' type='text/javascript'>//</script><!-- END CaaS HF Service -->

<!-- BEGIN Top JavaScript --><break><!-- END Top JavaScripts -->

<!-- BEGIN Favicons --><link href='../../i/favicon.ico' rel='shortcut icon'/><break><link href='../../i/favicon.png' rel='apple-touch-icon'/><!-- End Favicons -->

</head><!-- END Head Element -->

HTML Body Section

<!-- BEGIN Body Element --><body class='body' itemscope itemtype='http://schema.org/WebPage'>

<!-- BEGIN Header --><div id='header' class='header'>&#032;</div><!-- END Header -->

<div class='main'><!-- BEGIN Content Area --><break><!-- END Content Area --></div>

<!-- BEGIN Footer --><div id='footer' class='footer'>&#032;</div><!-- END Footer -->

<!-- BEGIN Bottom JavaScript --><!--[if lt IE 9]><break><script src='../../scripts/vendor/respond.js'>//</script><break><![endif]--><break><script src='../../scripts/rdt.js'>//</script><!-- END Bottom JavaScript -->

</body><!-- END Body Element -->

END HTML Element

</html><!-- END HTML Element -->