Framework7 Environment - Framework7

How to install Framework7?

This chapter will give a brief description about how to install and setup Framework7.

Framework7 can be downloaded in two ways:

  • Download from Framework7 Github repository
  • Framework7 can also be installed by using Bower as shown below:

bower install framework7

After successful installation of Framework7, user has to follow below steps to make use of Framework7 in their application:

Step 1: Install gulp-cli to build development and dist versions of Framework7 by using the below command:

npm install gulp-cli

The cli stands for Command Line Utility for Gulp.

Step 2: The Gulp must be installed globally by using the below command:

npm install --global gulp

Step 3: Next, install the NodeJS package manager which installs the node programs which makes specifying and link dependencies easy. Below command is used to install the npm:

npm install

Step 4: Development version of Framework7 can be built by using the below command:

npm build

Step 5: Once the development version of Framework7 is built, start building app from dist/ folder by using the following command:

npm dist

Step 6: Keep the app folder in the server and run the following command for navigation between pages of your app.

gulp server

Download Framework7 Library from CDNs

Content Delivery Network (CDN) is a network of servers designed to serve files for users. If CDN link is used in your web page, it takes the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of Framework7 from the same CDN, it won't have to be downloaded again. Users can include following CDN files into the HTML document.

Below CDN's are used in iOS App layout:

It is used to include Framework7 iOS CSS Library to your application.

It is used to include Framework7 iOS related color styles to your application.

The below CDN's are used in Android/Material App Layout:

It is used to include Framework7 JS library to your application.

It is used to apply Framework7 Material styling to your application.

CDN versions of the library have been used throughout this tutorial. We are using AMPPS(AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server for executing all the examples.


Below example demonstrates use of simple application in the Framework7 which will display the alert box with the customized message when you click on the navigation bar.

Next create one more HTML page i.e. envirmnt_about.html as shown below:



Below are the steps to see how above code works:

  • Save above HTML code as framework7_environment.html file in your server root folder.
  • Open this HTML file as http://localhost/framework7_environment.html and output as below gets displayed.
  • When you click on the navigation bar, it will display an alert box with a customized message.

My App

This is simple application...

  • About

  • Services

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Framework7 Topics