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:
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
2
It is used to include Framework7 iOS CSS Library to your application.
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
2
It is used to include Framework7 iOS related color styles to your application.
The below CDN's are used in Android/Material App Layout:
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
2
It is used to include Framework7 JS library to your application.
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>
2
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.
