Framework7 is a free and open source mobile HTML framework for creating hybrid mobile applications.

Framework7 can be used to create the following:

  1. Hybrid mobile apps with iOS and Android native look and feel.
  2. Web apps.
  3. Prototypes for apps.

Framework7 has a focus on iOS and Android, the two most popular Android platforms.

With this Framework7 supplies iOS as well as Google Material Design themes.

Framework7 aims to give developers with knowledge of Javascript, HTML and CSS the ability to create amazing mobile apps. Alot of people regard these three technologies as the easiest to learn, hence there alot of developers with at least basic knowledge of them.

Moreover the fact HTML, CSS and Javascript are primary to web development means that there are a fair share of people with their knowledge. Not to mention that you only need a browser to execute them and nothing more.

Framework7 apps can be compiled to Cordova so as to utilize device features like Geolocation, Camera and Contacts.

Once the Framework7 apps have been compiled to Cordova apps, they can be published to iOS App Store or Google Play.

Installing Framework7

Framework7 is a HTML/CSS/JS framework so it’s installation is pretty straight forward.

1. Using Starter Templates

It’s even easier if you are using Starter templates. These templates give the structure of a Framework7 app with all the required files and folders pre-set.

Download a starter template here.

Then all we need from the files you have downloaded is the dist/css and dist/js folders.

2. From GitHub

You can download Framework7 files from Github repository https://github.com/framework7io/framework7/releases.

Then all we need from the files you have downloaded is the dist/css and dist/js folders.

3. NPM

NPM stands for Node Package Manager and we can use it to install Framework7 as well.

You’ll require Node.js installed. Then you run the following command in the terminal:

npm install framework7

Then all we need from the files you have downloaded is the dist/css and dist/js folders.

Choose Files.

You’ll have several files like these:

.

You can see they are just a bunch of CSS and Javascript files.

For a simple project I can only need two:

  1. Either Framework7 Google Material CSS file or iOS CSS file. It depends on the theme you want.
  2. Framework7 javascript file.

Reference Framework7 css and js files.

Yah you then reference them in your html as you would in any project.

Something like this:

<!-- REFERENCE CSS-->
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
    <!-- REFERENCE SCRIPTS-->
<script type="text/javascript" src="assets/js/framework7.min.js"></script>

And there you are ready to go.

Best Regards.