dhg/Glue

Glue.js is for creating quick, beautiful prototypes. Here’s why it’s 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. Don’t worry, you still have working, sensable URLs even though the whole prototype is technically on one page.
• It’s stupid fast, easy and lightweight Link up a single 1.5kb JS file (plus an optional 1kb CSS file) and you’re 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 it’s 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 (don’t worry, it’s easy) Unfortunately, all browsers consider AJAXing local files to be a security threat if not in a server environment. It’s super easy to solve this though. If you’re 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 you’re 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.