Back
Core Features
Ultra Easy To Use

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

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

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.$;

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 by collecting navigation history. It is epsecially good if your users may come to the same page from different pages. And with Framework7 it is enough just to add "back" class to your link, and it will recognize what page to load.

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 uses high performance css animations and 3d transformations to achieve the best result.

Easy To Customize

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 is a library agnostic and ultra lightweight.