-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
136 lines (129 loc) · 7.8 KB
/
index.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pink - Single Page App framework</title>
<meta name="description" content="">
<meta name="author" content="ink, cookbook, recipes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- load inks css from the cdn -->
<link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.1/css/ink.css">
<link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.1/css/font-awesome.css">
<!-- load inks javascript files from the cdn -->
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/ink-all.js"></script>
<link rel="stylesheet" type="text/css" href="content/css/docs.css">
</head>
<body>
<div class="ink-grid">
<!--[if lte IE 9 ]>
<div class="ink-alert basic">
<button class="ink-dismiss">×</button>
<p>
<strong>You are using an outdated Internet Explorer version.</strong>
Please <a href="http://browsehappy.com/">upgrade to a browser</a> to improve your web experience.
</p>
</div>
-->
<header id="mainMenu">
<h1 class="hide-tiny hide-small"><a href="index.html"><img src="content/img/logo-small.png" height="50" alt=""></a><small>Single page app framework</small></h1>
<nav class="ink-navigation quarter-top-space">
<ul class="menu horizontal black hide-tiny hide-small">
<li><a href="get-started.html">Get started</a></li>
<li><a href="docs.html">Docs</a></li>
<li><a href="samples.html">Sample apps</a></li>
<li><a href="https://github.com/sapo/pink" target="_blank">GitHub</a></li>
</ul>
<ul class="menu horizontal black hide-medium hide-large hide-xlarge">
<li id="verticalMenuTrigger" class="menu-bars" data-target="#verticalMenuMenu">
<a href="#"><i class="fa fa-bars"></i>
</a>
<li class="small-logo-right">
<a href="index.html"><img src="content/img/logo-small.png" height="30" alt=""></a>
</li>
</ul>
</nav>
<nav class="ink-navigation hide-all" id="verticalMenuMenu">
<ul class="menu vertical black">
<li><a href="get-started.html">Get started</a></li>
<li><a href="docs.html">Docs</a></li>
<li><a href="samples.html">Sample apps</a></li>
<li><a href="https://github.com/sapo/pink" target="_blank">GitHub</a></li>
</ul>
</nav>
</header>
<div id="headerPadding" class="hide-small hide-tiny"> </div>
<div id="smallHeaderPadding" class="hide-medium hide-large hide-xlarge"> </div>
<div class="column-group quarter-space">
<div class="large-100 xlarge-100 align-center">
<img class="hide-small hide-tiny" src="content/img/logo-large.png" alt="">
<h1 class="title">"No frills" single page app framework</h1>
</div>
</div>
<hr>
<div class="column-group quarter-space top-space double-gutters">
<div class="large-50 xlarge-50 medium-100 small-100 tiny-100">
<h2>Why Pink?</h2>
<p class="quarter-top-space">
While there are other single page app frameworks, Pink is unique because it combines the great <a href="http://ink.sapo.pt">Ink</a> CSS and JavaScript framework with the fabulous <a href="http://knockoutjs.com">Knockout</a> data binding library, giving you a no frills, lightweight and modular approach for building awesome apps.
</p>
<h2>Just what you need</h2>
<p class="quarter-top-space">
So you want to start building modern client side apps, but don't want to take the hard path... You've come to the right place.<br>
We give you the code and libs to jumpstart your app without adding tons of code you don't need.
</p>
<h2>Where did this come from?</h2>
<p class="quarter-top-space">
We were looking for a sane way to build complex JavaScript applications that allowed us to dynamically load both data and modules automatically, and we decided to extend <a href="http://ink.sapo.pt">Ink's</a> excellent module mechanism to do just that through the magic of data binding.
</p>
<h2>Who built it?</h2>
<p class="quarter-top-space">
Pink was made possible by the great people from SAPO's intranet team, where we use it to build a number of line of business apps.
</p>
</div>
<div class="large-50 xlarge-50 medium-100 small-100 tiny-100">
<h3>Features</h3>
<ul>
<li>Great "out of the box" look & feel, CSS & widgets provided by Ink</li>
<li>MVVM (Model, view, view model) architecture inspired by <a href="http://knockoutjs.com">Knockout.js</a></li>
<li>Simple, straightforward conventions for application structure based on Ink modules</li>
<li>Dynamically loaded, Per-module templating with clean separation between behavior and presentation.</li>
<li>Customizable application bootstrap (via hooks and plugins)</li>
<li>Client-side navigation & routing (using routie.js)</li>
<li>Client-side signals/event bus for module decoupling (jssignals)</li>
<li>Various data-bind ready components: Autocomplete, Drag&Drop, Kanban, Grid, Tooltip, ModalWindow, ...</li>
<li>Powerful UI composition logic supporting custom made widgets</li>
</ul>
<div>
<img src="content/img/browser.png" title="IE 9+, FF 2+, Chrome 3+, Safari 3.2+, Opera 10+" alt="">
</div>
</div>
</div>
</div>
<footer class="clearfix">
<div class="ink-grid">
<div class="column-group">
<div class="large-50 vertical-space">
<h3>Pink is built with:</h3>
<ul class="unstyled">
<li><a href="http://ink.sapo.pt">Ink</a></li>
<li><a href="http://knockoutjs.com">Knockout</a></li>
<li><a href="http://projects.jga.me/routie/">Routie</a></li>
<li><a href="http://millermedeiros.github.io/js-signals/">Signals</a></li>
</ul>
</div>
<div class="large-50 vertical-space content-right">
<p class="note">Pink is licensed under the MIT Licence.</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
Ink.requireModules(['Ink.UI.Toggle_1'], function (Toggle) {
new Toggle('#verticalMenuTrigger');
});
</script>
</body>
</html>