Skip to content
Browse files

updating glue docs

  • Loading branch information...
1 parent 076fec7 commit 46ff9369786dd9a7c11e73db5f9fb309503df5bb Dave Gamache committed
3 archive/examples.html
@@ -1,3 +0,0 @@
-<p>All of the content on this page is being included through Glue. Here is an example of a <a href="#" glue-link="altpage">full
-page link</a>.</p>
7 archive/features.html
@@ -1,7 +0,0 @@
-<h2>Future features</h2>
- <li>Inject data into templates</li>
- <li>Iterate for data arrays</li>
- <li>Conditional template chunks</li>
- <li>Callback after rendering templates</li>
8 archive/intro.html
@@ -1,8 +0,0 @@
-<h1 class="super-header">Glue</h1>
-<p class="lead">Stateless, client-side prototyping with a 1kb JS file.</p>
- <li>Templates are semantic HTML files</li>
- <li>Infinitely nestable includes</li>
- <li>Page history with real URLs</li>
- <li>Animation between pages</li>
10 archive/issues.html
@@ -1,10 +0,0 @@
- <li><s>Put templates anywhere but still always render from top level</s></li>
- <li><s>Hit actual URLs for the templates</s></li>
- <li><s>History push and pull working</s></li>
- <li><s>Render all at once, not as each piece of sub-template comes in</s></li>
- <li><s>Else statement in renderTemplate should only run if !null, but sometimes still gets to that point?</s></li>
- <li>Base URL doesn't work with routing</li>
- <li>The mutliple calls to renderTemplate and routeToTemplate</li>
7 archive/launch.html
@@ -1,7 +0,0 @@
-<h2>Launch checklist</h2>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
27 archive/navbar.html
@@ -1,27 +0,0 @@
-<div class="navbar navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </a>
- <a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse">
- <ul class="nav">
- <li class="active">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </ul>
- </div>
- </div>
- </div>
- </div>
7 doc-assets/css/docs.css
@@ -9,8 +9,6 @@
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
- body {
- line-height: 1; }
ol, ul {
list-style: none; }
table {
@@ -60,7 +58,10 @@
+ul.disc {
+ list-style: disc;
+ padding-left: 18px;
body {
5 doc-assets/templates/examples.html
@@ -0,0 +1,5 @@
+<section id="examples" class="examples">
+ <p class="section-header"><strong>Check out an example</strong> of prototype built on Glue to get an idea of what you can build. </p>
+ <p><strong>This site is built on Glue</strong>. Normally, Glue is only meant for prototypes, not production deploys, but it just seemed right to use it here :) Every section is broken into an include that is rendered at runtime. Inspect this page and you can still see the shells for the Glue templates.</p>
+ <p><strong>I'm working on a webapp example</strong> Don't have anythign designed and running yet, but I promise it will happen soon.</p>
12 doc-assets/templates/get-started.html
@@ -1,21 +1,21 @@
-<section class="get-started">
+<section id="get-started" class="get-started">
<p class="section-header"><strong>Get started now</strong> with just 3 super simple steps:</p>
<ol class="get-started-list">
<h5 class="subsection-header">1. Download or clone Glue</h5>
- <p>You can just download the project with examples or feel free to check out the Github page and clone it.</p>
+ <p>You can just <a href="">download the project</a> with these docs or feel free to check out <a href="">the Github page</a> and clone it.</p>
<h5 class="subsection-header">2. Run a server of any kind (don’t worry, it’s easy)</h5>
- <p>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:</p>
+ <p>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. <strong>If you’re on a Mac</strong>, just open terminal, drag your prototype folder onto the terminal icon in your doc and run this command:</p>
<pre class="code-snippet short-bottom">
python -m SimpleHTTPServer
- <p>It also works to turn on web sharing, use MAMP or any other simple server will work. If you’re on Windows ...</p>
+ <p>Alternatively, turning on web sharing, using MAMP or any other server will work. If you’re on a Windows machine...</p>
- <h5 class="subsection-header">3. Open your browser and go to your localhost:####</h5>
- <p>However you set up your simple server, just point your browser at the appropriate localhost port and you should see the Glue docs.</p>
+ <h5 class="subsection-header">3. Open your browser and go to your server address</h5>
+ <p>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.</p>
12 doc-assets/templates/heading.html
@@ -1,6 +1,16 @@
<header class="page-header">
<img class="logo" src="doc-assets/img/logo.png" alt="">
<h2 class="main-heading">Beautiful prototyping.</h2>
- <h5 class="attribution">What is is <span class="text-divider">/</span> Using it <span class="text-divider">/</span> Get started</h5>
+ <h5 class="attribution">
+ <a href="#values">What it is</a>
+ <span class="text-divider">/</span>
+ <a href="#need-to-know">Using it</a>
+ <span class="text-divider">/</span>
+ <a href="#get-started">Getting started </a>
+ <span class="text-divider">/</span>
+ <a href="#examples">Examples</a>
+ <span class="text-divider">/</span>
+ <a href="#in-the-works">In the works</a>
+ </h5>
<div class="top-noise"></div>
9 doc-assets/templates/in-the-works.html
@@ -0,0 +1,9 @@
+<section id="in-the-works" class="in-the-works">
+ <p class="section-header"><strong>In the works.</strong> These are a few things I am still working on pulling together for Glue:</p>
+ <p><strong>Callback after rendereding templates</strong> will allow for custom functions after a Glue template renders</p>
+ <p><strong>Fix multiple render calls</strong> because it's just using uneccessary computing power and is sloppy. Fix it.</p>
+ <p><strong>Exit class application</strong> primarily for "animating out" of Glue templates</p>
+ <p><strong>Making the index URL accessible from the back button.</strong> Since there is no fragment to indicate template, Glue won't allow you to click "back" to the index.html page.</p>
+ <p><strong>Add a data-paramater to Glue links to set the container.</strong> All Glue links right now assume to .glue-container as the wrapping element, but it would be nice to be able to set a different container.</p>
+ <p><strong>Use with JS template compilers</strong>. This means you will be able to use syntax of your choice - for example Mustache, Dust or Jade. This will also mean you can mash data into your templates.</p>
2 doc-assets/templates/need-to-know.html
@@ -1,4 +1,4 @@
-<section class="need-to-know">
+<section id="need-to-know" class="need-to-know">
<p class="section-header"><strong>Using Glue</strong> is super simple. There are only three things you need to know:</p>
<ol class="need-to-know-list">
2 doc-assets/templates/values.html
@@ -1,4 +1,4 @@
-<section class="values">
+<section id="values" class="values">
<p class="section-header"><strong>Glue.js</strong> is for creating quick, beautiful prototypes. Here’s why it’s awesome:</p>
<ul class="value-list">
4 index.html
@@ -24,7 +24,9 @@
<div glue-src="doc-assets/templates/get-started"></div>
- <div glue-src="doc-assets/templates/get-started"></div>
+ <div glue-src="doc-assets/templates/examples"></div>
+ <hr>
+ <div glue-src="doc-assets/templates/in-the-works"></div>
8 source/glue.css
@@ -1,13 +1,11 @@
/* Fade in
-/*@-webkit-keyframes fade-in {
+@-webkit-keyframes fade-in {
0% {
opacity: 0;
- margin-top: -20px;
100% {
opacity: 1;
- margin-top: 0;
@-moz-keyframes fade-in {
@@ -19,7 +17,7 @@
-.logo {
+.rendered {
-webkit-animation: fade-in .5s 0 1 ease-out;
-moz-animation: fade-in .5s 0 1 ease-out;

0 comments on commit 46ff936

Please sign in to comment.
Something went wrong with that request. Please try again.