Pinecone

Skeleton 

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script>
        (function(html) {
            html.className = html.className.replace(/\bno-js\b/, 'js')
        })(document.documentElement);
    </script>
    <script src="../../scripts/pinecone.umd.js" defer></script>
    <script src="../../scripts/pinecone.js" defer></script>
    <link rel="stylesheet" href="../../styles/pinecone.css">
    <link rel="apple-touch-icon" sizes="180x180" href="../../images/apple-touch-icon.png">
    <link rel="icon" href="../../images/favicon.png">
    <title>Pinecone</title>
</head>

<body>
    <header role="banner">
        <div class="container">
            <!-- Menu component goes here (brand, search button, search form, and nav) -->
        </div>
    </header>
    <div class="wrap container" role="document">
        <div class="content">
            <main>
                <!-- Content goes here -->
            </main>
        </div>
    </div>
    <footer class="content-info">
        <div class="container">
            <!-- Footer component goes here -->
        </div>
    </footer>
</body>

</html>
 
<!doctype html>
<html class="no-js" lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
		<script src="{{ '/scripts/pinecone.umd.js' | path }}" defer></script>
		<script src="{{ '/scripts/pinecone.js' | path }}" defer></script>
		<link rel="stylesheet" href="{{ '/styles/pinecone.css' | path }}">
		<link rel="apple-touch-icon" sizes="180x180" href="{{ '/images/apple-touch-icon.png' | path }}">
		<link rel="icon" href="{{ '/images/favicon.png' | path }}" >
		<title>Pinecone</title>
	</head>

	<body>
		<header role="banner">
			<div class="container">
				<!-- Menu component goes here (brand, search button, search form, and nav) -->
			</div>
		</header>
		<div class="wrap container" role="document">
      		<div class="content">
				<main>
					<!-- Content goes here -->
				</main>
			</div>
		</div>
		<footer class="content-info">
  			<div class="container">
				<!-- Footer component goes here -->
			</div>
  		</footer>
	</body>
</html>
 
/* No context defined for this component. */

Skeleton

This component demonstrates the basic skeleton of a page. Other components should be included as per the HTML comments.