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.htmlfooter.html
index.html
- lib
Last active
February 20, 2017 03:28
-
-
Save coreybutler/524dd3c031b352a022eefe3bfaccdf47 to your computer and use it in GitHub Desktop.
NGN Includes Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| Header Content | |
| </header> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment