Glue

Glue.js is for creating quick, beautiful prototypes. Heres why its awesome:

• HTML partials served up with AJAX Glue lets you break up your markup into external HTML files for better organization, much like you would with CSS or JS. That means you can organize your HTML however you like, plus run and share it with just JS. No need for PHP, a Node server or anything like that.
• Single-page prototype with page animations Clicking from page to page in a Glue prototype all works without page refreshes, meaning you can use CSS to add transitions between pages. Dont worry, you still have working, sensable URLs even though the whole prototype is technically on one page.
• Its stupid fast, easy and lightweight Link up a single 1.5kb JS file (plus an optional 1kb CSS file) and youre ready to go. As soon as Glue is loaded, it AJAX's any included HTML and then fades the page in as a whole. Glue's syntax was designed for semantic simplicity, so its extremely easy to learn and read.

Using Glue is super simple. There are only 3 things you need to know:

1. data-glue-src is for partials Use the data-glue-src attribute on any element to replace its content with HTML from the template you specifiy when the page loads. <div data-glue-src="navbar">
2. Glue-link is for links to new pages Put a data-glue-link attribute on an anchor to clear the existing page and replace it with the new one you specify. <a data-glue-link=page2>Go to the next page</a>
3. The .glue-container in your index.html is important Any content that is going to change from page to page will be loaded into the .glue-container, so leave it in your index.html. Any templates outside of this will persist on every page. <div class="glue-container"></div>

Get started now with just 3 super simple steps:

1. Download or clone Glue You can just download the project with these docs or feel free to check out the Github page and clone it.
2. Run a server of any kind (dont worry, its easy) Unfortunately, all browsers consider AJAXing local files to be a security threat if not in a server environment. Its super easy to solve this though. If youre on a Mac, just open terminal, drag your prototype folder onto the terminal icon in your doc and run this command: python -m SimpleHTTPServer Alternatively, turning on web sharing, using MAMP or any other server will work. If youre on a Windows machine …
3. Open your browser and go to your server address However you set up your simple server, just point your browser at the appropriate localhost port and you should see the Glue docs. For reference, the standard python server URL will be localhost:8000.