-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
187 lines (176 loc) · 8.27 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<title>Refuel JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1-0">
<meta charset="utf-8">
<link rel="icon shortcut" type="image/x-icon" href="favicon.ico">
<!-- Bootstrap -->
<link href="css/fonts.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/refuel.css" rel="stylesheet" media="screen">
<link href="css/prettify_refuel.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/scroller.js?t=16"></script>
<script src="js/refuel.min.js" data-rf-startup="DemoApp"></script>
</head>
<body onload="prettyPrint()" class="gray-background">
<div class="pointer-wrapper top"><div class="upper-pointer"></div></div>
<main>
<header class="text-center">
<img src="img/robot_header.png" alt="robot-header" class="top-linked">
<img src="img/refuel_logo_def.png" alt="RefuelJS">
<h3>Make it simple, keep it clean</h3>
<a href="https://github.com/ReFuel/ReFuelJS" target="_blank" class="btn btn-large btn-primary github-icon"> View on GitHub</a>
<a href="https://twitter.com/appsfuel" target="_blank" class="btn btn-large btn-info twitter-icon"> Follow @appsfuel</a>
<div class="small">A project by <a href="http://appsfuel.com">Appsfuel</a> Developer Team</div>
<!--<div>
<a href="https://twitter.com/appsfuel" class="twitter-follow-button" data-show-count="true" data-dnt="true">Follow @appsfuel</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="RefuelJS" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>-->
</header>
<div class="slide row-fluid big-padding-top-bottom white-background">
<div class="container">
<section class="span6 text">
<h2>Mobile-first</h2>
<p>We started this project because we needed a good base to develop our HTML5 mobile apps. <strong>RefuelJS is designed to build Mobile Web Application</strong> first and foremost. It's on smartphones that we test our performances and our features primarily. Of course everything also works on desktop environments so don't worry about that^^.</p>
</section>
<section class="span6 image">
<img src="img/mobile.png" alt="fast">
</section>
</div>
</div>
<div class="slide row-fluid big-padding-top-bottom white-background">
<div class="container">
<section class="span6 image">
<img src="img/simply.png" alt="fast">
</section>
<section class="span6 text">
<h2>Simple</h2>
<p>
RefuelJS it's not meant to be a behemoth framework. That's not an attempt to build the JavaScript version of the Death Star, rather it's the will to build a fleet of fast and effective X-Wing Fighters.
RefuelJS is focused on simplicity, on providing only the functionality you need without overflowing you with prefabbricated code.
<strong>The final goal is to make an application with only few lines of code</strong> and every functionality defined directly inside the markup.
</p>
</section>
</div>
</div>
<div class="slide row-fluid big-padding-top-bottom white-background">
<div class="container">
<section class="span6 text">
<h2>Fast</h2>
<p>Almost every framework uses heavy libraries like jQuery and jQueryMobile, this hurts performance. <strong>RefuelJS is a lightweight library-agnostic platform</strong>, written in pure JavaScript just like good old times, it provides only what you need without burdening your code with unuseful stuff. It's not only fast in performance, it's also fast in development.</p>
</section>
<section class="span6 image">
<img src="img/flash.png" alt="fast">
</section>
</div>
</div>
<div class="slide row-fluid big-padding-top-bottom white-background">
<div class="container">
<section class="span6 image">
<img src="img/modular.png" alt="fast">
</section>
<section class="span6 text">
<h2>Modular</h2>
<p>RefuelJS won't impose an architecture to your app or a pattern to use, because this is about YOUR application. Develop for RefuelJS is about <strong>identifying common necessities in webapp development and design some modules to help in those needs</strong>, but you are not forced into using everything everywhere, the framework only loads those modules you actually use. Everything else is left outside.</p>
</section>
</div>
</div>
<div class="slide row-fluid big-padding-top-bottom white-background">
<div class="container">
<section class="span6 text">
<h2>Community Driven</h2>
<p>
This is not OUR project, we only started this, but RefuelJS will be built by the community. The project has been hosted on <a href="https://github.com/">Github</a> public repository from the very beginning, <a href="http://appsfuel.com/">Appsfuel</a> will support RefuelJS and its community but won't make everything.
<strong>Anyone in need of a new feature is invited to develop a proper module to implement that functionality</strong>, we will check the compliance of the module and then an admin will add it to the main repository.
So the next developer needing that fantastic feature won't have to re-invent the wheel.
</p>
</section>
<section class="span6 image">
<img src="img/github.png" alt="fast">
</section>
</div>
</div>
<section class="slide container big-padding-top-bottom">
<div class="row-fluid">
<section class="span12">
<h2>The Basics</h2>
<pre class="linenums prettyprint html">
<script type="text/plain" style="display:block">
<section id="example-app">
<h2>{{app_title}}</h2>
<input placeholder="Write something and press Enter" autofocus
data-rf-action-keydown="items:add" >
<ul data-rf-list="items" >
<li>
<div class="view">
<label>{{title}}</label>
<button class="destroy" data-rf-action="delete"></button>
</div>
</li>
</ul>
</section>
</script>
</pre>
</section>
</div>
<div class="row-fluid">
<section class="span12">
<pre class="prettyprint linenums">
var app;
Refuel.define('ExampleApp',{require: ['GenericModule', 'DataSource']},
function TodoApp() {
app = Refuel.newModule('GenericModule', {
root: document.querySelector('#example-app'),
autoload: true,
data: {
'app_title' : 'Refuel Example',
'items': Refuel.newModule('DataSource', {key: 'refuel-items'})
}
});
});
</pre>
</section>
</div>
<div class="row-fluid">
<section class="span12">
<section id="example-app" class="hero-unit">
<h4>{{app_title}}</h4>
<h5 class="smaller">data are persistent and will be saved in local storage</h5>
<input type="text" placeholder="Write something and press Enter" data-rf-action-keydown="items:add" autofocus>
<ul data-rf-list="items" >
<li data-rf-template="itemsTemplate">
<div class="view">
<label>{{title}}</label>
<a class="destroy" data-rf-action="delete">X</a>
</div>
</li>
</ul>
</section>
</section>
</div>
</section>
</main>
<div class="pointer-wrapper bottom"><div class="bottom-pointer"></div></div>
<div class="leftmenu">
<ul>
<li class="home selected"></li>
<li class="mobile"></li>
<li class="simple"></li>
<li class="fast"></li>
<li class="modular"></li>
<li class="community"></li>
<li class="basics"></li>
</ul>
</div>
<script>
$(window).load(function(){
scroller = new scroller({next: "div.pointer-wrapper.bottom", prev: "div.pointer-wrapper.top", menu: ".leftmenu"});
});
</script>
</body>
</html>_