Framework7 Custom Build

1. Download and unzip to local folder

2. Install Node.js (if not installed)

3. Install Gulp (if not installed) by executing the following command in terminal:

4. Copy scripts/build-config.js file to some place in the downloaded folder and rename it let’s say to scripts/my-config.js

5. Open this file and remove components that you don’t need or modify color theme and included colors:

6. Now, we are ready to build custom version of Framework7. We need to execute:

   $ npm run build-core:prod -- --config scripts/my-config.js --output path/to/output/folder

If you use bundler like Webpack or Rollup you can use only required Framework7 JS components without that build process and by importing only required components:

The following components are available for importing (all other components are part of the core):

Framework7 styles are built with . If you use Less and NPM in your app/project then you can easily create custom framework7 stylesheet with only components you need.

@import url('path/to/node_modules/framework7/framework7.less');
// import only components you need
@import url('path/to/node_modules/framework7/components/searchbar/searchbar.less');
@import url('path/to/node_modules/framework7/components/calendar/calendar.less');

We can go even further and specify Framework7’s main color theme and required colors in custom framework7.less file: