Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

getting more of the docs into the code and fixing the top noise

  • Loading branch information...
commit 076fec75c26f6943e9e89534f0cce977a9c71ce1 1 parent d593418
David Gamache authored
View
50 doc-assets/css/docs.css
@@ -64,11 +64,20 @@
body {
+ position: relative;
padding: 150px 0;
background-color: #f5f5f5;
- background-image: url('../img/top-noise.png'), url('../img/bg.jpg');
- background-repeat: repeat-x, repeat;
- background-position: 0 0, 0 0;
+ background-image: url('../img/bg.jpg');
+ background-repeat: repeat;
+ background-position: 0 0;
+}
+.top-noise {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 225px;
+ background: url('../img/top-noise.png') repeat-x;
}
.logo {
display: block;
@@ -132,6 +141,7 @@ hr {
float: left;
margin-left: 25px;
width: 325px;
+ margin-top: 10px;
}
.value-list li {
@@ -149,6 +159,7 @@ hr {
.subsection-header {
color: #333;
font-weight: 600;
+ line-height: 22px;
}
@@ -223,3 +234,36 @@ hr {
+.code-snippet {
+ padding: 10px 20px;
+ background-color: #e3e6e8;
+ color: #47829e;
+ font-size: 13px;
+ margin: -10px 0 40px;
+ font-family: "Menlo", "Monaco", monospace;
+}
+.code-value {
+ color: #bd4015;
+}
+.code-plain {
+ color: #999;
+}
+.get-started-list li {
+ margin-bottom: 40px;
+}
+
+
+
+
+
+
+.short-bottom {
+ margin-bottom: 12px;
+}
+
+.no-bottom {
+ margin-bottom: 0;
+}
+.text-divider {
+ margin: 0 5px;
+}
View
21 doc-assets/templates/get-started.html
@@ -0,0 +1,21 @@
+<section class="get-started">
+ <p class="section-header"><strong>Get started now</strong> with just 3 super simple steps:</p>
+ <ol class="get-started-list">
+ <li>
+ <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>
+ </li>
+ <li>
+ <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>
+<pre class="code-snippet short-bottom">
+python -m SimpleHTTPServer
+</pre>
+ <p>It also works to turn on web sharing, use MAMP or any other simple server will work. If you’re on Windows ...</p>
+ </li>
+ <li>
+ <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>
+ </li>
+ </ol>
+</section>
View
7 doc-assets/templates/heading.html
@@ -1,5 +1,6 @@
<header class="page-header">
<img class="logo" src="doc-assets/img/logo.png" alt="">
- <h2 class="main-heading">Simple prototyping.</h2>
- <h5 class="attribution">Made with love by <a href="#">@dhg</a>.</h5>
-</header>
+ <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>
+</header>
+<div class="top-noise"></div>
View
26 doc-assets/templates/need-to-know.html
@@ -0,0 +1,26 @@
+<section 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">
+ <li>
+ <h5 class="subsection-header">1. Glue-src is for partials</h5>
+ <p>Use the “glue-src” attribute on any element to replace its content with HTML from the template you specifiy when the page loads.</p>
+<pre class="code-snippet">
+&lt;div glue-src=<span class="code-value">&quot;navbar&quot;</span>&gt;</div>
+</pre>
+ </li>
+ <li>
+ <h5 class="subsection-header">2. Glue-link is for links to new pages</h5>
+ <p>Put a “glue-link” attribute on an anchor to clear the existing page and replace it with the new one you specify.</p>
+<pre class="code-snippet">
+&lt;a glue-link=<span class="code-value">”page2”</span>&gt;<span class="code-plain">Go to the next page</span>&lt;/a&gt;
+</pre>
+ </li>
+ <li>
+ <h5 class="subsection-header">3. The .glue-container in your index.html is important</h5>
+ <p>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.</p>
+<pre class="code-snippet">
+&lt;div class=<span class="code-value">&quot;glue-container&quot;</span>&gt;&lt;/div&gt;</span>
+</pre>
+ </li>
+ </ol>
+</section>
View
4 doc-assets/templates/values.html
@@ -10,7 +10,7 @@ <h5 class="subsection-header">HTML partials served up with AJAX</h5>
</li>
<li>
<div class="value-desc">
- <h5 class="subsection-header">Persistant single-page style</h5>
+ <h5 class="subsection-header">Single-page prototype with page animations</h5>
<p>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.</p>
</div>
<img class="value-graphic" src="doc-assets/img/value-seamless.png" alt="">
@@ -19,7 +19,7 @@ <h5 class="subsection-header">Persistant single-page style</h5>
<img class="value-graphic" src="doc-assets/img/value-size.png" alt="">
<div class="value-desc">
<h5 class="subsection-header">It’s stupid fast, easy and lightweight</h5>
- <p>Link up a single 1.5kb JS file (plus an optional 1kb CSS file) and you’re ready to go. The syntax was designed for semantic simplicity, so it’s extremely easy to understand. </p>
+ <p>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. </p>
</div>
</li>
</ul>
View
6 index.html
@@ -19,6 +19,12 @@
<div class="main-content">
<hr>
<div glue-src="doc-assets/templates/values"></div>
+ <hr>
+ <div glue-src="doc-assets/templates/need-to-know"></div>
+ <hr>
+ <div glue-src="doc-assets/templates/get-started"></div>
+ <hr>
+ <div glue-src="doc-assets/templates/get-started"></div>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.