Framework7 Package Structure

Package

Framework7 core library contains the following files and folders:

  1. framework7/
  2. components/
  3. accordion/
  4. accordion.js
  5. accordion.less
  6. accordion.css
  7. accordion.js
  8. actions/
  9. actions.js
  10. actions.less
  11. actions.css
  12. actions.js
  13. ...
  14. js/
  15. framework7-lite.bundle.js
  16. framework7-lite.bundle.min.js
  17. framework7-lite.js
  18. framework7-lite.min.js
  19. framework7.bundle.js
  20. framework7.bundle.min.js
  21. framework7.js
  22. framework7.min.js
  23. css/
  24. framework7.bundle.css
  25. framework7.bundle.min.css
  26. framework7.bundle.rtl.css
  27. framework7.bundle.rtl.min.css
  28. framework7.css
  29. framework7.min.css
  30. framework7.rtl.css
  31. framework7.rtl.min.css
  32. framework7-lite.esm.bundle.js
  33. framework7-lite.esm.js
  34. framework7.esm.bundle.js
  35. framework7.esm.js
  36. framework7.bundle.less
  37. framework7.less

Lite Version

Framework7 “Lite” version (files with -lite suffix) doesn’t have Framework7 Component (Router Component) functionality, and it is designed to be used with Framework7-Vue/React libs where you use Vue/React components instead.

Styles

Main Framework7 styles are located in css/ 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 js/ folder there are so called UMD JavaScript files intended to be used directly in browser (e.g. with <script src="...">) or with libraries like Require.js:

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

There is also “lite” version included:

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

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

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

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

  1. 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:

  1. // Import core framework
  2. import Framework7 from 'framework7';
  3. // Import additional components
  4. import Searchbar from 'framework7/components/searchbar/searchbar.js';
  5. import Calendar from 'framework7/components/calendar/calendar.js';
  6. import Popup from 'framework7/components/popup/popup.js';
  7. // Install F7 Components using .use() method on class:
  8. Framework7.use([Searchbar, Calendar, Popup]);
  9. // Init app
  10. 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 Template7, Dom7, Request, Device, Utils and Support libraries:

  1. import Framework7, { Device, Request } from 'framework7';
  2. var app = new Framework7({/*...*/});
  3. if (Device.ios) {
  4. Request.get('http://google.com');
  5. }

“Lite” module is also available:

  1. import Framework7 from 'framework7/framework7-lite.esm.js';

ES Module Bundle

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

  1. // Import framework with all components
  2. import Framework7 from 'framework7/framework7.esm.bundle.js';
  3. // Init app
  4. var app = new Framework7({/*...*/});

“Lite” bundle module is also available:

  1. import Framework7 from 'framework7/framework7-lite.esm.bundle.js';

ES-Next

Note, that Framework7 ES modules are in ES-next syntax, so don’t forget to enable/configure your Babel/Buble to transpile them as well, as well as template7, dom7 and ssr-window modules that used as dependencies.

← Installation

App HTML Layout →