This repository has been archived by the owner on Apr 24, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 222
/
about.html
133 lines (123 loc) · 7.85 KB
/
about.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
<!DOCTYPE html>
<html>
<head>
<title>Fries - About Fries</title>
<meta name="description" content="Fries: Prototype Android apps using HTML, CSS, and JavaScript.">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic" type="text/css">
<link rel="stylesheet" href="dist/themes/holo-dark/holo-dark.min.css">
<link rel="stylesheet" href="docs/css/documentation.css">
<link rel="stylesheet" href="docs/css/prettify.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header class="action-bar docs-header">
<a href="index.html" class="app-icon action" data-ignore="true">
<i class="icon-fries"></i>
<h1 class="title">Fries</h1>
</a>
<div class="tab-fixed">
<ul class="tab-inner">
<li class="active"><a href="about.html" data-ignore="true" title="About">About</a></li>
<li><a href="components.html" data-ignore="true" title="Components">Components</a></li>
<li><a href="https://github.com/jaunesarmiento/fries" data-ignore="true" title="GitHub">GitHub</a></li>
<li><a href="https://github.com/jaunesarmiento/fries/archive/master.zip" data-ignore="true" title="Download">Download</a></li>
<li><a href="credits.html" data-ignore="true" title="Credits">Credits</a></li>
</ul>
</div>
<ul class="actions pull-right">
<li class="action-overflow">
<a class="action action-overflow-icon toggle-spinner"><i></i></a>
<ol reversed="reversed" class="action-overflow-list spinner">
<li class="spinner-item"><a href="index.html" data-ignore="true" title="Home">Home</a></li>
<li class="spinner-item"><a href="about.html" data-ignore="true">About</a></li>
<li class="spinner-item"><a href="components.html" data-ignore="true">Components</a></li>
<li class="spinner-item"><a href="https://github.com/jaunesarmiento/fries" data-ignore="true">GitHub</a></li>
<li class="spinner-item"><a href="https://github.com/jaunesarmiento/fries/archive/master.zip" data-ignore="true">Download</a></li>
<li class="spinner-item"><a href="credits.html" data-ignore="true">Credits</a></li>
</ol>
</li>
</ul>
</header>
<nav class="action-bar fixed-bottom docs-footer">
<ul>
<li><a data-ignore="true" class="twitter-share-button" href="https://twitter.com/share" data-url="http://jaunesarmiento.me/fries/" data-text="Fries v2.0.0: Create sexy #Android UI using #HTML, #CSS, and #JavaScript." data-via="getfries">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li>
<a data-ignore="true" class="twitter-follow-button" href="https://twitter.com/getfries" data-show-count="true">Follow @getfries</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li>
<iframe width="107" height="20" src="http://ghbtns.com/github-btn.html?user=jaunesarmiento&repo=fries&type=watch&count=true" frameborder="0" scrolling="0" allowtransparency="true"></iframe>
</li>
<li>
<iframe width="95" height="20" src="http://ghbtns.com/github-btn.html?user=jaunesarmiento&repo=fries&type=fork&count=true" frameborder="0" scrolling="0" allowtransparency="true"></iframe>
</li>
</ul>
</nav>
<div class="docs-sidebar">
<ul class="list inset">
<li class="list-divider">About Fries</li>
<li class="list-item-single-line selectable"><a href="#introduction" data-ignore="true">Introduction</a></li>
<li class="list-item-single-line selectable"><a href="#getting-started" data-ignore="true">Getting Started</a></li>
<li class="list-item-single-line selectable"><a href="#page-setup" data-ignore="true">Page Setup</a></li>
</ul>
</div>
<div class="docs-content inner-content">
<article id="introduction" class="content-section">
<header class="section-header">
<h2 class="section-title">Introduction</h2>
<p class="section-description">Getting to know Fries</p>
</header>
<p>Fries is an awesome mobile UI development framework for Android apps using just HTML, CSS, and Javascript. Fries was inspired by <a href="http://maker.github.io/ratchet/">Ratchet</a> so Fries extending its huge thanks to the Ratchet team.</p>
</article>
<article id="getting-started" class="content-section">
<header class="section-header">
<h2 class="section-title">Getting started</h2>
<p class="section-description">What to do next after downloading</p>
</header>
<ol class="docs">
<li>
<h3>Create your pages</h3>
<p>Creating the markup for your pages is really easy. Just follow these docs on how to write them. You may also customize the styles to make the prototype your own.</p>
</li>
<li>
<h3>Stitch them up with stack.js</h3>
<p>Stack.js allows you to create interactive pages by dynamically loading HTML on the fly and inserting it to your app. Read more about stack.js to understand how this works.</p>
</li>
<li>
<h3>Deep-fry your Fries</h3>
<p>If you're testing on your browser, you can modify the screen resolution and emulate touches on your Chrome by going to the Developer Tools then Overrides. Change the device metrics from there and click "Emulate touch events".</p>
<p>To test your Fries app on your device, serve it from your local web server and load it up on your Android browser.</p>
<p>You can also do this by installing a web server on your Android device and serving the files from there. Or you can create a PhoneGap Android project then copy your files into its <code>/assets/www/</code> directory.</p>
</li>
</ol>
</article>
<article id="page-setup" class="content-section">
<div class="section-header">
<h2 class="section-title">Page setup</h2>
<p class="section-description">Making your Fries extra crispy</p>
</div>
<p>Here's how to setup your pages so that they're fully functional.</p>
<ol class="docs">
<li>
<h3>Wrap everything in a div with <code>.page</code> class</h3>
<p>The <code>.page</code> class is required to get the page transitions working perfectly. All fixed bars and tabs (<code>.action-bar</code>, <code>.tab-fixed</code>) should always be the first thing inside the <code>.page</code> div. This is really important!</p>
</li>
<li>
<h3>Everything else goes in <code>.content</code></h3>
<p>Anything that's not an <code>.action-bar</code> or a <code>.tab-fixed</code> should be put in a <code>div</code> with the class "content". Put this div after the bars in the <code>.page</code> div. The <code>.content</code> div is what actually scrolls in a Fries app.</p>
</li>
<li>
<h3>Don't forget your meta tags</h3>
<p>The meta tags are included in the <a href="https://github.com/jaunesarmiento/fries/blob/master/examples/template.html" target="_blank" data-ignore="true">template.html</a> that comes with your Fries. Make sure they're in your HTML so Fries works.</p>
</li>
</ol>
</article>
</div>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="docs/js/prettify.js"></script>
<script src="docs/js/documentation.js"></script>
</body>
</html>