Framework7 Custom Build

    1. Download and unzip Framework7 GitHub repository to local folder

    2. Install (if not installed)

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

    4. Now, we need to install required dependencies. Go to the folder with downloaded and unzipped Framework7 repository and execute in terminal:

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

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

      1. /* my-config.js */
      2. const config = {
      3.   target: 'universal',
      4.   rtl: false, // change to true to generate RTL styles
      6.   // remove any components you don't need
      7.   components: [
      8.     'dialog',
      9.     'popup',
      10.     'login-screen',
      11.     'popover',
      12.     'actions',
      13.     'sheet',
      14.     'toast',
      15.     'preloader',
      16.     'progressbar',
      17.     'sortable',
      18.     'swipeout',
      19.     'accordion',
      20.     'contacts-list',
      21.     'virtual-list',
      22.     'timeline',
      23.     'tabs',
      24.     'panel',
      25.     'card',
      26.     'chip',
      27.     'form',
      28.     'input',
      29.     'checkbox',
      30.     'radio',
      31.     'toggle',
      32.     'range',
      33.     'stepper',
      34.     'smart-select',
      35.     'grid',
      36.     'calendar',
      37.     'picker',
      38.     'infinite-scroll',
      39.     'pull-to-refresh',
      40.     'lazy',
      41.     'fab',
      42.     'searchbar',
      43.     'messages',
      44.     'messagebar',
      45.     'swiper',
      46.     'photo-browser',
      47.     'notification',
      48.     'autocomplete',
      49.     'tooltip',
      50.     'gauge',
      51.     'vi',
      52.     'typography',
      53.   ],
      54.   // include/exclude dark theme styles
      55.   darkTheme: true,
      56.   // include/exclude themes
      57.   themes: [
      58.     'ios',
      59.     'md',
      61.   // modify colors
      62.   ios: {
      63.     themeColor: '#007aff',
      64.     colors: {
      65.       red: '#ff3b30',
      66.       green: '#4cd964',
      67.       blue: '#007aff',
      68.       pink: '#ff2d55',
      69.       yellow: '#ffcc00',
      70.       orange: '#ff9500',
      71.       gray: '#8e8e93',
      72.       white: '#ffffff',
      73.       black: '#000000',
      74.     },
      75.   },
      76.   md: {
      77.     themeColor: '#2196f3',
      78.     colors: {
      79.       red: '#f44336',
      80.       green: '#4caf50',
      81.       blue: '#2196f3',
      82.       pink: '#e91e63',
      83.       yellow: '#ffeb3b',
      84.       orange: '#ff9800',
      85.       gray: '#9e9e9e',
      86.       white: '#ffffff',
      87.       black: '#000000',
      88.     },
      89.   },
      90. };
      91. module.exports = config;

    8. That is all. Now you should see newly generated js and css files in specified output folder

    9. If you are in hurry and want to see how its working then do follow step 1 to 4

      1. $ npm run build-core:dev

      The result is available in build/ folder.

    10. To build production version of Framework7:

      1. $ npm run build-core:prod

      Production version will be available in dist/ folder.

    11. Run Kitchen Sink with development environment

      1. $ npm run core:prod

    13. Kitchen Sink is live

      Visit http://localhost:3000/kitchen-sink/core/ From Youre Browser

    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:

    1. // Import core framework
    2. import Framework7 from 'framework7';
    4. // Import additional components
    5. import Searchbar from 'framework7/components/searchbar/searchbar.js';
    6. import Calendar from 'framework7/components/calendar/calendar.js';
    7. import Popup from 'framework7/components/popup/popup.js';
    9. // Install F7 Components using .use() method on Framework7 class:
    10. Framework7.use([Searchbar, Calendar, Popup]);
    12. // Init app
    13. var app = new Framework7({/*...*/});

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

    Framework7 styles are build 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. // core
    2. @import url('path/to/node_modules/framework7/framework7.less');
    4. // import only components you need
    5. @import url('path/to/node_modules/framework7/components/searchbar/searchbar.less');
    6. @import url('path/to/node_modules/framework7/components/calendar/calendar.less');
    7. @import url('path/to/node_modules/framework7/components/popup/popup.less');
    9. // include/exclude themes
    10. @includeIosTheme: true;
    11. @includeMdTheme: true;
    13. // include/exclude dark theme
    14. @includeDarkTheme: true;
    16. // iOS theme color
    17. @themeColorIos: #007aff;
    18. // MD theme color
    19. @themeColorMd: #2196f3;
    21. // Extra colors for iOS theme
    22. @colorsIos: red #ff3b30, green #4cd964, blue #007aff, pink #ff2d55, yellow #ffcc00, orange #ff9500, gray #8e8e93, white #ffffff, black #000000;
    24. // Extra colors for MD theme
    25. @colorsMd: red #f44336, green #4caf50, blue #2196f3, pink #e91e63, yellow #ffeb3b, orange #ff9800, gray #9e9e9e, white #ffffff, black #000000;
    27. @rtl: false;