F7 - Full Featured HTML Framework For Building iOS7 Apps(Framework7开源轻量级HTML框架)

Framework7

Framework7 - is the free (Open Source) and ultra lightweight mobile framework for development of hybrid (Phonegap) or web apps with iOS7 native look and feel. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed for iOS Safari, but also works great on desktop Chrome and Safari. Framework7 is created by Vladimir Kharlampidi (The iDangero.us)

Main approach of the Framework7 is to give you an instrument, easy and clear, for building iOS7 apps on HTML. Framework7 is full of freedom, it doesn't put you in a strict frames like other HTML mobile frameworks (for example like jQuery Mobile with crazy "data-role" attributes or Sencha Touch where you need to be JS pro). Framework7 doesn't try to do everything for you, no, Framework7 gives you a freedom, it has ultra simple and clean HTML layout, all basic interfaces (futher more), animations, work with views, and simple customization and styling opportunities.

And yes, Framework7 doesn't try to be compatible with all platforms, it is focused only on iOS7 to bring the best experience and simplicity.

Core Features

Ultra Easy To Use

All you need to make it works is a simple HTML layout and two lines of JavaScript:

var app = new Framework7();
app.addView('.main-view');

XHR + Caching

Framework7 utilizes own methods to load pages via Ajax with internal configurable caching that allows to load pages faster and saves a lot of traffic for your users!

History

When you navigate deeper and deeper you may face a problem about how to get back in the same order? Framework7 solves this problem but collection navigation history. It is epsecially good if your users may come to the same page from different pages. And with Framework7 it will be enough to just add "back" class to your link, and it will know which page to load.

Custom DOM Library

Framework7 is library agnostic, so you don't need to use any other library (like jQuery, Zepto, Mootols, etc) to make it work. If you need to work with DOM (like jQuery) Framework7 may help you to avoid, it contains custom function to work with DOM. Its syntax is the same as in jQuery with almost the same methods, and also support jQuery-like chaining! The following methods are available with the same syntax and functionality: .addClass() .removeClass() .hasClass() .toggleClass() .on() .off() .attr() .transform() .transition() .transitionEnd().animationEnd() .width() .offset() .html() .is() .parents() .parent() .children() .append() .prepend() .find() .remove()

This function can be exposed for your usage by calling for example $ = app.$;

Previous Page Preloading

Framework7 preloads previous page (when available) so your users can always do the nice swipe back gesture to get that page.

Multiple Views

Framework7 supports unlimited number of different isolated views, like the main view where you are reading this text and another view in right panel. And the fun thing is that you can control one view from another by using "data-view" attribute on links.

Performant Animations

It is all about performance and Framework7 only uses high performance css animations and 3d transitions to achieve the best result.

Easy To Customize

Did you try to customize jQuery mobile or Sencha Touch?). With Framework7 everything is simple, all styles are divided by parts into small .less files, so you can easy, very easy, bring your own custom styles to your app.

Ultra Lightweight

Framework7 library agnostic and ultra lightweight. Its size just around 5Kb minified and gzipped!

Ready To Use Visual Features

Data Lists

Framwork7 allows you to be flexible with data list. You can make them as navigation menus, you can use there icons, inputs, and any elements inside of the list, and even make them nested:

Modals

There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy api and can be combined with each other. Check these examples:

Side Panels

Framework7 comes with 2 panels (on left and on right), both are optional. With two different layouts/effects - cover above the content (like left panel here) and below the content (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with it own dynamic toolbar. Checkout panels

Forms

Framework7 provides very flexible forms layout, you can use it with/out icons, with/out labels, or mixed layouts.

Pages Animations

One of the main target of Framework7 is to have native look and feel of iOS7 application. And Framework7 is the only framework that solves it and offers 1:1 animation of page changes with smooth parallax effect, changing opacity and shadow of newly loaded page.

Swipe Back

Framework7 supports iOS7 well known swipe back gesture from left border of screen if you want to get to the previous page. It works, just swipe from left (or drag with mouse) area of this page to see smooth transition to previous page.

Dynamic Toolbar

As said above Framework7 does everything to gives you a feel of native iOS7 app. And on of significant features that will improve this feeling is dynamic top toolbar. You can see like its elements sliding/fading during pages transition. Effect (slide/fade) for each element is easily configurable via additional classes.