Framework7 Package Structure

• Package
• Lite Version
• Styles
• Scripts (UMD)
• Components
• ES Module
• ES Module Bundle
• ES Module Exports

Package

Framework7 core library package contains the following exports:

framework7/
    components/
        accordion/
            accordion-aurora.less
            accordion-ios.less
            accordion-md.less
            accordion-rtl.css
            accordion-vars.less
            accordion.css
            accordion.d.ts
            accordion.js
            accordion.lazy.js
            accordion.less
        ...
    less/
    modules/
    framework7-bundle-rtl.css
    framework7-bundle-rtl.min.css
    framework7-bundle.css
    framework7-bundle.esm.js
    framework7-bundle.js
    framework7-bundle.less
    framework7-bundle.min.css
    framework7-bundle.min.js
    framework7-lite-bundle.esm.js
    framework7-lite.esm.js
    framework7-rtl.css
    framework7-rtl.min.css
    framework7-types.d.ts
    framework7.css
    framework7.d.ts
    framework7.esm.js
    framework7.js
    framework7.less
    framework7.min.css
    framework7.min.js

Lite Version

Framework7 "Lite" version (files with -lite suffix) doesn't have Framework7 Component (Router Component) functionality, Core APIs for Gauge, Pie Chart and Area Chart components. It is designed to be used with Framework7-Vue/React/Svelte libraries where you use Vue/React/Svelte components instead.

Lite version is only available for ESM imports.

Styles

Main Framework7 styles are located in root package folder:

• framework7.css - contains minimal (core) Framework7 styles with minimal required set of components.
• framework7-rtl.css - same but for RTL layout.
• framework7-bundle.css - contains styles for Framework7 core version and includes styles for all components.
• framework7-bundle-rtl.css - same but for RTL layout.

Scripts (UMD)

In root folder there are so called UMD JavaScript files intended to be used directly in browser (e.g. with <script src="...">):

• framework7.js - contains minimal (core) Framework7 version with minimal required set of components.
• framework7-bundle.js - contains whole Framework7 with all its components.

Lite version is not available in UMD format.

Components

All components are located in components/ folder and required to be used with core (not bundle) version. You can learn more about how to use them in lazy modules section.

ES Module

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/components/searchbar/';
import Calendar from 'framework7/components/calendar/';
import Popup from 'framework7/components/popup/';

// Import components styles
import 'framework7/components/searchbar/css';
import 'framework7/components/calendar/css';
import 'framework7/components/popup/css';

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

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

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

In addition to default export it has named export for Dom7, request, getDevice, createStore, utils and getSupport helpers:

import Framework7, { getDevice, request } from 'framework7';

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

var device = getDevice();

if (device.ios) {
  request.get('http://google.com');
}

"Lite" module is also available:

import Framework7 from 'framework7/lite';

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/bundle';

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

"Lite" bundle module is also available:

import Framework7 from 'framework7/lite-bundle';

ES Module Exports

Framework Core package is a pure ESM package, it has the following exports field in package.json:

{
  "exports": {
    ".": "./framework7.esm.js",
    "./core": "./framework7.esm.js",
    "./bundle": "./framework7-bundle.esm.js",
    "./lite": "./framework7-lite.esm.js",
    "./lite/bundle": "./framework7-lite-bundle.esm.js",
    "./lite-bundle": "./framework7-lite-bundle.esm.js",
    "./less": "./framework7.less",
    "./css": "./framework7.css",
    "./css/rtl": "./framework7-rtl.css",
    "./css/bundle": "./framework7-bundle.css",
    "./css/bundle/rtl": "./framework7-bundle-rtl.css",
    "./types": "./framework7-types.d.ts",
    "./components/appbar": "./components/appbar/appbar.js",
    "./components/appbar/less": "./components/appbar/appbar.less",
    "./components/appbar/css": "./components/appbar/appbar.css",
    "./components/appbar/css/rtl": "./components/appbar/appbar-rtl.css",
    "./components/dialog": "./components/dialog/dialog.js",
    "./components/dialog/less": "./components/dialog/dialog.less",
    "./components/dialog/css": "./components/dialog/dialog.css",
    "./components/dialog/css/rtl": "./components/dialog/dialog-rtl.css",
    ...
  }
}