Skip to content

Instantly share code, notes, and snippets.

@coreybutler

coreybutler/README.md

Last active February 20, 2017 03:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save coreybutler/524dd3c031b352a022eefe3bfaccdf47 to your computer and use it in GitHub Desktop.
Save coreybutler/524dd3c031b352a022eefe3bfaccdf47 to your computer and use it in GitHub Desktop.
Download ZIP
NGN Includes Example
Raw
README.md

Github gists don't support folders, so the code uses hyphens to dilineate where a directory should be. The directory structure should loook something like:

  • root
    • lib
      • app.js
    • templates
      • header.html
      • footer.html
    • index.html
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Include Example</title>
<script src="https://cdn.author.io/ngn/latest/chassis.min.js"></script>
<script src="https://cdn.author.io/ngnx/latest/chassis.x.min.js"></script>
<style>
body, html {
padding: 0;
margin: 0;
display: flex;
flex: 1;
flex-direction: column;
height: 100vh;
width: 100vw;
font-family: Helvetica, Arial;
}
main {
display: flex;
flex: 1;
background-color: #cccccc;
color: #000000;
}
.width-constraint {
max-width: 1000px;
width: 100%;
height: 100%;
margin: auto;
border: 1px dashed #333333;
padding: 2em;
}
header, footer {
display: flex;
align-items: center;
justify-content: center;
min-height: 10vh;
max-height: 10vh;
background-color: #333333;
color: #ffffff;
}
</style>
</head>
<body>
<main>
<div class="width-constraint">
Body Content
</div>
</main>
<script src="lib/app.js"></script>
</body>
</html>
Raw
lib-app.js
'use strict'
NGN.NET.template('./templates/header.html', {}, function (element) {
document.body.insertAdjacentElement('afterbegin', element)
})
NGN.NET.template('./templates/footer.html', {}, function (element) {
document.body.insertAdjacentElement('beforeend', element)
})
Raw
templates-header.html
<header>
Header Content
</header>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment