Installation

It is really easy to build your app with Framework7. To get started we need to install Framework7. You can skip this step and use one of the ready to use starter app templates.

We can download/install framework7 with two ways:

  • Download From GitHub Repository

    We can download required Framework7 files from Framework7 GitHub repository.

  • Install From NPM

    We can also install Framework7 from NPM:

    $ npm install framework7
    

From the downloaded package we will need files from dist/css and dist/js folders

ES Module

This feature currently can be used in bundlers like Webpack and Rollup

Framework7 can also be imported as an ES-next module:

import Framework7 from 'framework7';

Framework7 has modular structure and by default it exports only core Framework7 with core components.

And if you need additional components they must be included additionally:

// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/dist/components/searchbar/searchbar.js';
import Calendar from 'framework7/dist/components/calendar/calendar.js';
import Popup from 'framework7/dist/components/popup/popup.js';

// Install F7 Components using .use() method on class:
Framework7.use([Searchbar, Calendar, Popup]);

// Init app
var app = new Framework({/*...*/});

Such modular structure provides best tree-shaking results and package size optimization.

In addition to default export it has named export for Template7, Dom7, Request, Device, Utils and Support libraries:

import Framework7, { Device, Request } from 'framework7';

var app = new Framework({/*...*/});

if (Device.ios) {
  Request.get('http://google.com');
}

ES Module Bundle

If you need to include Framework7 with all components, we can include its another script bundle with all components installed:

// Import framework with all components
import Framework7 from 'framework7/dist/framework7.esm.bundle.js';

// Init app
var app = new Framework({/*...*/});

ES-Next

Note, that Framework7 ES modules are in ES-next syntax, so don't forget to enable/configure your Babel/Buble to transpile theme as well, as well as Template7 and Dom7 modules that used as dependencies.

App HTML Layout

Now when we have downloaded/installed Framework7, we can start from creating App Layout.