Framework7 Custom Build

Custom Build

Framework7 comes with Gulp builder that allows to build custom library version where you may include only required components/modules. We need the following:

  1. Download and unzip Framework7 GitHub repository to local folder

  2. Install Node.js (if not installed)

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

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

    $ npm install
  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 neeed or modify color theme and included colors:
    /* my-config.js */
    const config = {
      target: 'universal',
      rtl: false, // change to true to generate RTL styles
    
      // remove any components you don't need
      components: [
        'dialog',
        'popup',
        'login-screen',
        'popover',
        'actions',
        'sheet',
        'toast',
        'preloader',
        'progressbar',
        'sortable',
        'swipeout',
        'accordion',
        'contacts-list',
        'virtual-list',
        'timeline',
        'tabs',
        'panel',
        'card',
        'chip',
        'form',
        'input',
        'checkbox',
        'radio',
        'toggle',
        'range',
        'smart-select',
        'grid',
        'calendar',
        'picker',
        'infinite-scroll',
        'pull-to-refresh',
        'lazy',
        'data-table',
        'fab',
        'searchbar',
        'messages',
        'messagebar',
        'swiper',
        'photo-browser',
        'notification',
        'autocomplete',
        'vi',
        'typography',
      ],
      // include/exclude dark theme styles
      darkTheme: true,
      // include/exclude themes
      themes: [
        'ios',
        'md',
      ],
      // modify colors
      ios: {
        themeColor: '#007aff',
        colors: {
          red: '#ff3b30',
          green: '#4cd964',
          blue: '#007aff',
          pink: '#ff2d55',
          yellow: '#ffcc00',
          orange: '#ff9500',
          gray: '#8e8e93',
          white: '#ffffff',
          black: '#000000',
        },
      },
      md: {
        themeColor: '#2196f3',
        colors: {
          red: '#f44336',
          green: '#4caf50',
          blue: '#2196f3',
          pink: '#e91e63',
          yellow: '#ffeb3b',
          orange: '#ff9800',
          gray: '#9e9e9e',
          white: '#ffffff',
          black: '#000000',
        },
      },
    };
    
    module.exports = config;
    
  7. Now, we are ready to build custom version of Framework7. We need to execute:

    $ npm run build:prod -- --config scripts/my-config.js --output path/to/output/folder
  8. That is all. Now you should see newly generated js and css files in specified output folder

ES Modules

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:

// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/dist/components/searchbar/searchbar.js';
import Calendar from 'framework7/dist/components/calendar/calendar.js';
import Popup from 'framework7/dist/components/popup/popup.js';

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

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

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

Component Path
Dialog framework7/dist/components/dialog/dialog.js
Popup framework7/dist/components/popup/popup.js
LoginScreen framework7/dist/components/login-screen/login-screen.js
Popover framework7/dist/components/popover/popover.js
Actions framework7/dist/components/actions/actions.js
Sheet framework7/dist/components/sheet/sheet.js
Toast framework7/dist/components/toast/toast.js
Preloader framework7/dist/components/preloader/preloader.js
Progressbar framework7/dist/components/progressbar/progressbar.js
Sortable framework7/dist/components/sortable/sortable.js
Swipeout framework7/dist/components/swipeout/swipeout.js
Accordion framework7/dist/components/accordion/accordion.js
ContactsList framework7/dist/components/contacts-list/contacts-list.js
VirtualList framework7/dist/components/virtual-list/virtual-list.js
Timeline framework7/dist/components/timeline/timeline.js
Tabs framework7/dist/components/tabs/tabs.js
Panel framework7/dist/components/panel/panel.js
Card framework7/dist/components/card/card.js
Chip framework7/dist/components/chip/chip.js
Form framework7/dist/components/form/form.js
Input framework7/dist/components/input/input.js
Checkbox framework7/dist/components/checkbox/checkbox.js
Radio framework7/dist/components/radio/radio.js
Toggle framework7/dist/components/toggle/toggle.js
Range framework7/dist/components/range/range.js
SmartSelect framework7/dist/components/smart-select/smart-select.js
Grid framework7/dist/components/grid/grid.js
Calendar framework7/dist/components/calendar/calendar.js
Picker framework7/dist/components/picker/picker.js
InfiniteScroll framework7/dist/components/infinite-scroll/infinite-scroll.js
PullToRefresh framework7/dist/components/pull-to-refresh/pull-to-refresh.js
Lazy framework7/dist/components/lazy/lazy.js
DataTable framework7/dist/components/data-table/data-table.js
Fab framework7/dist/components/fab/fab.js
Searchbar framework7/dist/components/searchbar/searchbar.js
Messages framework7/dist/components/messages/messages.js
Messagebar framework7/dist/components/messagebar/messagebar.js
Swiper framework7/dist/components/swiper/swiper.js
PhotoBrowser framework7/dist/components/photo-browser/photo-browser.js
Notification framework7/dist/components/notification/notification.js
Autocomplete framework7/dist/components/autocomplete/autocomplete.js
Vi framework7/dist/components/vi/vi.js
Typography framework7/dist/components/typography/typography.js