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:

    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:

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

    7. That is all. Now you should see newly generated js and css files in specified 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:

    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.

    Create your own framework7.less file:

    1. @import url('path/to/node_modules/framework7/framework7.less');
    3. // import only components you need
    4. @import url('path/to/node_modules/framework7/components/searchbar/searchbar.less');
    5. @import url('path/to/node_modules/framework7/components/calendar/calendar.less');
    6. @import url('path/to/node_modules/framework7/components/popup/popup.less');

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

    ← Lazy Modules