Introduction to Framework7

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.

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!

Framework7 is not compatible with all platforms. It is focused only on iOS and Google Material design to bring the best experience and simplicity. Framework7 has easy and familiar jQuery syntax to get started without any delay.To control click delay for touch UI’s, Framework7 has built-in Fast Click library.


Framework7 has built-in grid system layout for arranging your elements responsively. It dynamically loads pages from templates via flexible router api. Framework7 is not dependent on any third party library even for DOM manipulation. Instead, it has its own custom DOM7.


Framework7 can also be used with Angular and React frameworks.You can start creating apps once you know HTML, CSS and some basic JavaScript. It supports faster development via Bower. It is easy to develop apps for iOS and Android without learning it.







Framework7 provides different types of layouts for your application. It supports three types of Navbar/Toolbar layouts −

Static Layout:

The static layout is most often used layout-type and includes Navbar and toolbar, which can be a scroll-able page content and each page contains its own Navbar and toolbar.

Fixed Layout:

Fixed layout includes its own navbar and toolbar, which can be visible on screen and cannot be scroll-able on page.

Through Layout:

In this layout, the navbar and the toolbar appears fixed for all pages within single view.

Mixed Layout:

You can mix the different types of layouts in the single view.

After successful installation of Framework7, you need to install gulp-cli to build development and dist versions of Framework7 by using the following command. The Gulp must be installed globally by using the following command. Next, install the NodeJS package manager, which installs the node programs that makes it easier to specify and link dependencies. The following command is used to install the npm. The development version of Framework7 can be built by using the following command. Once the development version of Framework7 is built, start building the app from dist/ folder by using the following command. One must keep the app folder in the server and run the following command for navigation between pages of your app.

The above is a brief about Framework7. The content mentioned above have been taken from various sites. Watch out this space for more updated on latest trends in Technology.

Leave a Reply

Your email address will not be published. Required fields are marked *