forked from framework7io/framework7-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
312 lines (311 loc) · 22.4 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Framework7 - Full Featured Mobile HTML Framework For Building iOS & Android Apps</title>
<meta property="og:image" content="http://framework7.io/framework7/i/f7-banner.jpg">
<link rel="stylesheet" href="//cdn.framework7.io/css/normalize.css">
<link rel="stylesheet" href="//cdn.framework7.io/css/main.css">
<link rel="shortcut icon" href="favicon.png">
<script src="//cdn.framework7.io/js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body>
<header>
<div class="center">
<div class="left"><a href="./" class="logo"></a>
<div class="title">Framework7</div>
<div class="slogan">Full Featured HTML Framework<br>For Building iOS & Android Apps</div>
<div class="buttons"><a href="https://github.com/nolimits4web/Framework7/archive/v1.4.2.zip">Download</a><a href="/get-started/">Get Started</a></div>
<div class="release-info">MIT Licensed, v1.4.2 released on February 27, 2016 | <a href="https://github.com/nolimits4web/Framework7/blob/master/CHANGELOG.md" target="_blank">Changelog</a></div>
<div class="links"><a href="/docs/">Docs</a><a href="http://forum.framework7.io">Forum</a><a href="/examples/">Layouts</a><a href="/apps/">Demo Apps</a><a href="/showcase/">Showcase</a></div>
<div class="github-buttons"><a href="https://github.com/nolimits4web/framework7/" target="_blank"><img src="//cdn.framework7.io/i/gh-logo.png"></a><a href="https://github.com/nolimits4web/framework7/" target="_blank" class="gh-stars"><span></span> stars</a><a href="https://github.com/nolimits4web/framework7/" target="_blank" class="gh-forks"><span></span> forks</a></div>
</div>
<div class="phone">
<iframe src="kitchen-sink-ios/" frameborder="0" scrolling="no"></iframe>
<div class="statusbar"></div>
<div class="theme-switch"><a href="kitchen-sink-ios/" target="_blank" class="active">
<div class="theme-icon">
<div class="logo-apple"></div><span>iOS</span>
</div>
<div class="fullscreen"><i></i><span>Fullscreen<br>Preview</span></div></a><a href="kitchen-sink-material/" target="_blank">
<div class="theme-icon">
<div class="logo-android"></div><span>Material</span>
</div>
<div class="fullscreen"><i></i><span>Fullscreen<br>Preview</span></div></a></div>
</div>
</div>
</header>
<div class="share-line">
<div class="center">
<div class="share-buttons">
<div class="share-button">
<div data-href="http://framework7.io" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true" class="fb-like"></div>
</div>
<div class="share-button"><a href="https://twitter.com/share" class="twitter-share-button"></a></div>
<div class="share-button"><a href="https://twitter.com/idangerous" data-show-count="true" class="twitter-follow-button"></a></div>
<div class="share-button">
<div data-size="medium" class="g-plusone"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="content center">
<div class="home-block home-intro">
<h1>Framework7</h1>
<p>Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.</p>
<p>The main approach of the Framework7 is to give you an opportunity to create iOS & Android apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your imagination or offer ways of any solutions somehow. Framework7 gives you freedom!</p>
<p>Framework7 is not compatible with all platforms. It is focused only on iOS and Google Material design to bring the best experience and simplicity.</p>
<p><strong>Framework7 is definitely for you if you decide to build iOS or Android hybrid app (PhoneGap) or web app that looks like and feels as great native iOS and Google Material apps.</strong></p>
</div>
<div class="home-block home-easy-to-use">
<div class="pic"><img src="//cdn.framework7.io/i/feats/html.jpg" alt="" height="310"></div>
<div class="text">
<h2>Ultra Easy To Use.<br>Not Harder Than Website!</h2>
<p>To create iOS apps using Framework7 is so easy as website creation. Try to start and you will be surprised how easy is it. All you need to make it work is a simple HTML layout and attached framework's CSS and JS files! Framework7 doesn't force you to write some custom tags that will be converted by JavaScript to something else. It doesn't force you to write and describe all your content in JavaScript (or JSON). Just plain HTML and you always get exactly the same that you expect to get when you write this HTML.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="home-block home-ios">
<div class="text">
<h2>iOS Specific</h2>
<p>As said above Framework7 is iOS specific framework. From the very beginning it was carefully thought-out to give you easy ways to realize all incredible features from all necessary UI elements visualization to complicated animation and touch interactions that characterize the platform. That is why Framework7 is the only solution to realize precisely pixel-perfect iOS native app's interface.</p>
</div>
<div class="pic"><img src="//cdn.framework7.io/i/feats/ios.jpg" alt=""></div>
<div class="clearfix"></div>
</div>
<div class="home-block home-ios">
<div class="text">
<h2>Material Theme</h2>
<p>Framework7 Material theme was designed according to the official Google Material design specification to bring pixel-perfect Material features - from visual design and colors to interactions and effects. And now, Framework7 will be a great solution to create Android apps with native Material look and feel.</p>
</div>
<div class="pic"><img src="//cdn.framework7.io/i/feats/material.jpg" alt=""></div>
<div class="clearfix"></div>
</div>
<div class="home-block home-ui">
<div class="text">
<h2>UI Components</h2>
<p>Framework7 comes with a bunch of ready to use UI elements and widgets like modals, popup, action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader (activity indicator), form elements, etc. The awesome point is that you don't need JavaScript at all for the most of mentioned widgets.</p>
</div>
<div class="pic"><img data-src="//cdn.framework7.io/i/feats/ui.jpg" alt="" class="lazy"></div>
<div class="clearfix"></div>
</div>
<div class="home-block home-killer">
<h2>Killer Features</h2>
<div class="tab-links"><a href="#" class="active">Swipe Back</a><a href="#">Swipe Actions</a><a href="#">Dynamic Navbar</a><a href="#">Pull To Refresh</a><a href="#">Messages</a></div>
<div class="tabs">
<div class="tab active">
<div class="pic">
<video src="//cdn.framework7.io/i/feats/swipeback.mp4" loop autoplay></video>
</div>
<div class="text">
<h3>Swipe Back</h3>
<p>One of Framework7' killing feature is supporting of iOS well known swipe back gesture from left border of screen when you want to get to the previous page. It simply works, and works perfectly as you expect it to do. Just swipe from left (or drag with mouse) area of the page to see smooth transition to the previous page. It is not just A-B transition. It really follows your finger with parallax animation while touch!</p>
</div>
</div>
<div class="tab">
<div class="pic">
<video src="//cdn.framework7.io/i/feats/swipeout.mp4" loop></video>
</div>
<div class="text">
<h3>Swipe Actions</h3>
<p>Do you remember how you swipe left on the message in the Mail app if you want to delete it or mark as read? Yep, Framework7 has totally the same functionality for any list elements, with the same smooth animation and touch interaction!</p>
</div>
</div>
<div class="tab">
<div class="pic">
<video src="//cdn.framework7.io/i/feats/navbar.mp4" loop></video>
</div>
<div class="text">
<h3>Dynamic Navbar</h3>
<p>As was mentioned already Framework7 makes everything to give you a feel of native iOS app. And one of the significant feature that improves this feeling is the dynamic navigation bar (navbar). You can see how its elements sliding and fading during pages transition and when you swipe back.</p>
</div>
</div>
<div class="tab">
<div class="pic">
<video src="//cdn.framework7.io/i/feats/ptr.mp4" loop></video>
</div>
<div class="text">
<h3>Pull To Refresh</h3>
<p>Framework7 is probably the first and only framework that has this great feature realized on pure native scrolling! That is why pull to refresh behavior is perfect as possible and works totally equal in many native iOS apps!</p>
</div>
</div>
<div class="tab">
<div class="pic">
<video src="//cdn.framework7.io/i/feats/messages.mp4" loop></video>
</div>
<div class="text">
<h3>Messages</h3>
<p>Framework7 comes with great realized "messages" widget that you can easily customize and integrate into your app for messaging between users or devices using some realtime sync data service like Pusher or PubNub. </p>
</div>
</div>
</div>
</div>
<div class="home-block home-styles">
<div class="text">
<h2>Easy To Customize</h2>
<p>With Framework7 everything is simple, all styles are divided by parts into small <b>.less</b> files, so you can really easy bring your own custom styles to your app.</p>
<p>Check out Framework7 iOS & Android apps in <a href="showcase/">Showcase</a> section:</p>
</div>
<div class="pic"><img src="//cdn.framework7.io/i/showcase/delights1.jpeg"><img src="//cdn.framework7.io/i/showcase/series72.png"><img src="//cdn.framework7.io/i/showcase/zebra1.jpeg"><img src="//cdn.framework7.io/i/showcase/aquasella1.jpeg"></div>
</div>
<div class="home-block home-more">
<div class="text">
<h2>Many More Features...</h2>
</div>
<div class="feats">
<div class="feat">
<h3>Native Scrolling</h3>
<p>It can sound even curious but one of the most important Framework7 feature is that it uses only native scrolling. Moreover - it multiplies its advantages! So you can still have this awesome scrolling with momentum and resistance bounce without any scrolling issues!</p>
</div>
<div class="feat">
<h3>Multiple Views (Split View)</h3>
<p>Framework7 supports unlimited number of different isolated views. And the fun thing is that you can easily control each single view without any line of JavaScript just using "data-view" attribute on links.</p>
</div>
<div class="feat">
<h3>Library Agnostic</h3>
<p>Framework7 doesn't use and does not depend on any third party libraries. That is why it is ultra lightweight, performance and flexible.</p>
</div>
<div class="feat">
<h3>Clear JS API</h3>
<p>No need to learn something new With Framework7. It has ultra clear and easy JavaScript API methods to control every part of your app.</p>
</div>
<div class="feat">
<h3>High-performance Animation</h3>
<p>It is all about performance and Framework7 uses only high performance hardware accelerated css animations and transitions to achieve the best result.</p>
</div>
<div class="feat">
<h3>Pages Animation</h3>
<p>One of the main target of Framework7 is to have native look and feeling of iOS application. And Framework7 is the only framework that solves it and offers 1:1 page animation with smooth parallax effect, changing opacity and shadow when loading new page.</p>
</div>
<div class="feat">
<h3>XHR + Caching + History + Preloading</h3>
<p>This is an unbeatable combination to make your app routing as perfect as possible. Framework7 is ready to route your app pages using XHR (optional) with its own internal methods and internal HTML configurable caching that allow to load pages faster and save a lot of time and traffic for your users! It loads page via Ajax only ones per specified caching period (10 minutes by default), other times it just gets it from memory. It allows to make further requests immediately!</p>
</div>
<div class="feat">
<h3>Dom7 - Custom Dom Library</h3>
<p>As said above Framework7 doesn't use any third party library, even for DOM operation, even jQuery. It has its own custom DOM library that utilizes most edge and high-performance methods for DOM manipulation. You can also use it and you don’t need to learn something new for that, it has the same syntax as well known jQuery library with support of the most popular and widely used methods and jQuery-like chaining.</p>
</div>
</div>
</div>
<div class="home-block home-featured">
<div class="center">
<h2>Featured iOS Apps Made With Framework7</h2>
<div class="feat-apps">
<div class="feat-app"><a href="https://itunes.apple.com/app/pixel-pusher/id978292186" target="_blank" class="feat-app-icon feat-app-icon-rounded"><img src="//cdn.framework7.io/i/showcase/pixelpusher.jpeg"></a><a href="https://itunes.apple.com/app/pixel-pusher/id978292186" target="_blank" class="feat-app-title">PIXEL-PUSHER</a>
<div class="feat-app-author">by <a href="https://itunes.apple.com/artist/brett-gregson/id820233075?uo=8&at=1l3voeJ" target="_blank">Brett Gregson</a></div>
</div>
<div class="feat-app"><a href="https://itunes.apple.com/app/sprint-social/id975135816" target="_blank" class="feat-app-icon feat-app-icon-rounded"><img src="//cdn.framework7.io/i/showcase/sprintsocial.png"></a><a href="https://itunes.apple.com/app/sprint-social/id975135816" target="_blank" class="feat-app-title">Sprint Social</a>
<div class="feat-app-author">by <a href="https://itunes.apple.com/artist/click-innovate-ltd/id545084415" target="_blank">Click Innovate Ltd</a></div>
</div>
<div class="feat-app"><a href="https://itunes.apple.com/app/prsm/id989164526?mt=8&uo=8&at=1l3voeJ" target="_blank" class="feat-app-icon feat-app-icon-rounded"><img src="//cdn.framework7.io/i/showcase/prism.png"></a><a href="https://itunes.apple.com/app/prsm/id989164526?mt=8&uo=8&at=1l3voeJ" target="_blank" class="feat-app-title">PRSM</a>
<div class="feat-app-author">by <a href="https://itunes.apple.com/artist/brett-gregson/id820233075?uo=8&at=1l3voeJ" target="_blank">Brett Gregson</a></div>
</div>
<div class="feat-app"><a href="https://itunes.apple.com/us/app/series-seven/id888005622" target="_blank" class="feat-app-icon"><img src="//cdn.framework7.io/i/showcase/series7.png"></a><a href="https://itunes.apple.com/us/app/series-seven/id888005622" target="_blank" class="feat-app-title">Series Seven</a>
<div class="feat-app-author">by <a href="http://idangero.us/" target="_blank">iDangero.us</a></div>
</div>
<div class="feat-app"><a href="https://itunes.apple.com/app/monday-delights/id797451618" target="_blank" class="feat-app-icon feat-app-icon-rounded"><img src="//cdn.framework7.io/i/showcase/delights.jpg"></a><a href="https://itunes.apple.com/app/monday-delights/id797451618" target="_blank" class="feat-app-title">Monday Delights</a>
<div class="feat-app-author">by <a href="https://itunes.apple.com/us/artist/yevart/id797451621" target="_blank">Yevart</a></div>
</div>
<div class="feat-app"><a href="https://itunes.apple.com/us/app/polygen-polygon-wallpaper/id896479944" target="_blank" class="feat-app-icon feat-app-icon-rounded"><img src="//cdn.framework7.io/i/showcase/polygen.jpg"></a><a href="https://itunes.apple.com/us/app/polygen-polygon-wallpaper/id896479944" target="_blank" class="feat-app-title">PolyGen</a>
<div class="feat-app-author">by <a href="https://itunes.apple.com/us/artist/bartlomiej-niemtur/id873021586" target="_blank">Bartlomiej Niemtur</a></div>
</div>
</div>
<p>More apps in <a href="showcase/">Showcase</a></p>
</div>
</div>
<div class="home-block home-free">
<div class="text">
<h2>And It Is Free</h2>
<p>Framework7 is completely free and open-source (MIT Licensed)</p>
<p><a href="https://github.com/nolimits4web/Framework7/archive/v1.4.2.zip">Download</a><a href="./get-started/">Get Started With Framework7</a><a href="./docs/">Documentation</a><a href="./contribute/">Contribute</a></p>
</div>
</div>
<div class="home-block home-products">
<h2>More Great Products By iDangero.us</h2>
<div class="more-products"><a href="http://idangero.us/swiper/" class="product"><img src="//cdn.framework7.io/i/logo-swiper.png">
<div class="title"><span>Swiper</span></div>
<div class="text">Most Modern Mobile Touch Slider</div></a><a href="http://idangero.us/template7/" class="product"><img src="//cdn.framework7.io/i/logo-t7.png">
<div class="title"><span>Template7</span></div>
<div class="text">Mobile-first JavaScript Template Engine</div></a>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="share-line">
<div class="center">
<div class="share-buttons">
<div class="share-button">
<div data-href="http://framework7.io" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true" class="fb-like"></div>
</div>
<div class="share-button"><a href="https://twitter.com/share" class="twitter-share-button"></a></div>
<div class="share-button"><a href="https://twitter.com/idangerous" data-show-count="true" class="twitter-follow-button"></a></div>
<div class="share-button">
<div data-size="medium" class="g-plusone"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="github-buttons"><a href="https://github.com/nolimits4web/framework7/" target="_blank"><img src="//cdn.framework7.io/i/gh-logo.png"></a><a href="https://github.com/nolimits4web/framework7/" target="_blank" class="gh-stars"><span></span> stars</a><a href="https://github.com/nolimits4web/framework7/" target="_blank" class="gh-forks"><span></span> forks</a></div>
<div class="clearfix"></div>
</div>
</div>
<footer>
<div class="center">
<div class="links">
<div class="links-block">
<div class="links-block-title">Project</div>
<ul>
<li><a href="https://github.com/nolimits4web/Framework7/releases" target="_blank">Download</a></li>
<li><a href="/contribute/">Contribute</a></li>
<li><a href="/donate/">Donate</a></li>
<li><a href="https://github.com/nolimits4web/Framework7/blob/master/CHANGELOG.md" target="_blank">Changelog</a></li>
</ul>
</div>
<div class="links-block">
<div class="links-block-title">Learn</div>
<ul>
<li><a href="/get-started/">Get Started</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="/tutorials/">Tutorials</a></li>
<li><a href="http://forum.framework7.io" target="_blank">Forum</a></li>
</ul>
</div>
<div class="links-block">
<div class="links-block-title">Apps</div>
<ul>
<li><a href="/examples/">Layouts</a></li>
<li><a href="/plugins/">Plugins</a></li>
<li><a href="/apps/">Demo Apps</a></li>
<li><a href="/showcase/">Showcase</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="copy">
<div class="copy-left">
<p>Code licensed under <a href="https://github.com/nolimits4web/Framework7/blob/master/LICENSE" target="_blank">MIT</a></p>
<p>2016 © Framework7 is brought to you by <a href="https://twitter.com/nolimits4web" target="_blank">Vladimir Kharlampidi</a> from <a href="http://idangero.us">iDangero.us</a>. </p>
</div>
<div class="copy-right">
<p>Proudly supported by <a href="https://www.keycdn.com/" class="keycdn-link" target="_blank"><img src="//cdn.framework7.io/i/keycdn-logo.svg" alt="KeyCDN" title="KeyCDN" class="keycdn-logo"></a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</footer>
<script></script>
<script src="//cdn.framework7.io/js/vendor/jquery-1.11.0.min.js"></script>
<script src="//cdn.framework7.io/js/plugins.js"></script>
<script src="//cdn.framework7.io/js/main.js"></script>
<script>var _merchantSettings=_merchantSettings || [];_merchantSettings.push(['AT', '1l3voeJ']);(function(){var autolink=document.createElement('script');autolink.type='text/javascript';autolink.async=true; autolink.src= ('https:' == document.location.protocol) ? 'https://autolinkmaker.itunes.apple.com/js/itunes_autolinkmaker.js' : 'http://autolinkmaker.itunes.apple.com/js/itunes_autolinkmaker.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(autolink, s);})();</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74282934-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>