CliQr's DOM Structure

this is what you get when you view source on any page on cliqr's product.

by ritcheyer

HTML

<!doctype html>
<!--[if lte IE 8]>     <html class="no-js lte-ie8" lang="en"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie9 w3c" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js w3c" lang="en"> <!--<![endif]-->
	<head>
		<!--  Links to CSS files and meta tags will be injected into the <head> tag through the MetaView -->
		<link href="/assets/css/base.css" rel="stylesheet" type="text/css" />
		<!--  Start Application -->
		<script  src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js" async defer></script>
	</head>
	<body>
		<!-- Main Content Container. This DOM element will be owned by the layout view  -->
		<div id="main"></div>
		<script>
			/**
			 * Check whether the application is in optiomized mode
			 * Do not use jquery in this function because the dev mode needs to be checked before any other library is loaded
			 * and jquery would not have been loaded at this point.
			 */
			function isDevMode(){
				 var key = "cliqr_app_mode_dev";
				 var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
				 if(keyValue && keyValue.length >= 2 && keyValue[2] == "true"){
					 return true;
				 }
				 return false; 		
			}
			
			(function(){
				var appRoot = isDevMode()?"jsApp":"jsApp-opt";
				var initApp = function(){
					if(require){
						clearInterval(interval);	
						require([appRoot+"/config"],function(config){
							config.baseUrl = appRoot;
							require.config(config);
						});
					}
				};
				var interval = setInterval(initApp,100); //Waiting for require js to load				
				
			})();
		</script>
	</body>
</html>