-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathexamples.html
54 lines (54 loc) · 5.59 KB
/
examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://spine.github.io/spine.css">
<title>Spine JS</title>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="/" title="Source on Github" class="navbar-brand">Spine</a><a id="docVersion" href="https://github.com/spine/spine/archive/v.1.6.2.zip" class="navbar-text">v1.6.2 <span class="glyphicon glyphicon-cloud-download"></span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://spine.github.io/api/">API</a></li>
<li><a href="http://spine.github.io/docs/">Docs</a></li>
<li><a href="https://github.com/spine/spine">GitHub</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<p>
Todos is a very simple to-do application. Users can CRUD tasks, and mark them as complete.
The source is <a href="http://github.com/maccman/spine.todos">available on GitHub</a>. <a href="http://maccman.github.com/spine.todos">[Demo]</a>
</p><img src="https://lh4.googleusercontent.com/_IH1OempnqUc/TZF16JZSTlI/AAAAAAAABKM/ojAu7OBqXp8/s500/Screen%20shot%202011-03-29%20at%2019.01.44.png">
<p>There is also the great <a href="http://todomvc.com/">TodoMVC project</a> that compares frontend frameworks. A Spine Example is available there as well. <a href="https://github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/spine">On GitHub</a>. <a href="http://todomvc.com/architecture-examples/spine/">[Demo]</a></p>
<hr>
<p>Spine contacts is a simple address book, allowing users to CRUD contacts. The full source is <a href="http://github.com/maccman/spine.contacts">available on GitHub</a>. <a href="http://spine-contacts.herokuapp.com">[Demo]</a></p><img src="https://lh5.googleusercontent.com/_IH1OempnqUc/TZpgYfnlUBI/AAAAAAAABKg/UYLhdmoc15o/s500/contacts.png">
<hr>
<p>Exercise Slot Machine is a another simple app. Users can manage exercises and do random selections on them. The full source is <a href="http://github.com/aeischeid/exerciseSlots">available on GitHub</a>. <a href="http://www.aaideas.com/currentprojects/exerciseslots/">[Demo]</a></p>
<hr>
<p>Holla is one of the more advanced examples, and <a href="http://github.com/maccman/holla">can be found on GitHub</a>. Holla is a group chat application, and uses a combination of <a href="http://rubyonrails.org">Rails</a>, <a href="http://github.com/maccman/juggernaut">Juggernaut</a> and Spine to let users chat in realtime. *WebKit only*. <a href="http://maccman-holla.heroku.com">[Demo]</a></p><img src="https://lh4.googleusercontent.com/_IH1OempnqUc/TZF1gMnidmI/AAAAAAAABKE/b9rp9RdtA3o/s500/Screen%20shot%202011-03-29%20at%2018.58.12.png">
<hr>
<p>The next example shows how to easily implement infinite scrolling using Spine & Rails. The source code can be found <a href="http://github.com/maccman/spine.infinite">on GitHub</a>, and there's also a <a href="http://spine-infinite.herokuapp.com/">live demo</a>.</p><img src="https://lh6.googleusercontent.com/-XoGlAJopIWY/Tp2jqNAIH_I/AAAAAAAABbU/MG7v_OtmZ4k/s500/Screen%252520Shot%2525202011-10-18%252520at%25252017.04.27.png">
<hr>
<p>A demonstration of integrating <a href="https://github.com/maccman/spine.rails3">Spine & Rails 3</a>. There's also an example of realtime sync in the <a href="https://github.com/maccman/spine.rails3/tree/fowa">fowa</a> branch. <a href="http://spine-fowa.herokuapp.com/">[Demo]</a></p><img src="https://lh4.googleusercontent.com/-vxBcOT0TIpM/ToNWaL-o83I/AAAAAAAABao/ObsGjxoX5oQ/s500/Screen%252520Shot%2525202011-09-27%252520at%25252022.16.41.png">
<hr>
<p>A complex <a href="https://github.com/anito/app.director">photo album app</a> using CakePHP and Spine.js. <a href="http://gap.webpremiere.de/director_app">[Demo]</a></p><img src="https://lh4.googleusercontent.com/-BCcP-3R-LXQ/T3uNLsNxY0I/AAAAAAAADP8/K1VUhC5ABSs/s1006/Bildschirmfoto+2012-04-04+um+01.50.01.jpg">
<hr>
<p>A sort of WYSIWYG web-app designer. <a href="https://github.com/maccman/stylo">Stylo</a> allows you to manipulate various HTML elements, add styles and edit text. <a href="http://styloapp.com/">[Demo]</a></p><img src="https://a248.e.akamai.net/camo.github.com/45a7a80eec28d8396806167b08eeb77108180f58/687474703a2f2f696d672e737662746c652e636f6d2f6d6163636d616e2d32343037373637313833323632382d7261772e706e67">
<hr>
<p>TESTMAN. Uses Spine and Bootstrap with Jade templates. <a href="https://github.com/globalvetlink/apiTestMan">TestMan</a> is a tool for building up a suite of api test meant as a companion to PostMan.</p>
<hr>
<p>An interview and itroduction to Spine folloed by a guided tutorial for a <a href="http://addyosmani.com/blog/building-apps-spinejs/">bit.ly client app</a></p>
</div>
</body>
</html>