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 need or modify color theme and included colors:
    /* my-config.js */
    const config = {
      rtl: false, // change to true to generate RTL styles
    
      // remove any components you don't need
      components: [
        // Appbar
        'appbar',
    
        // Modals
        'dialog',
        'popup',
        'login-screen',
        'popover',
        'actions',
        'sheet',
        'toast',
    
        // Loaders
        'preloader',
        'progressbar',
    
        // List Components
        'sortable',
        'swipeout',
        'accordion',
        'contacts-list',
        'virtual-list',
        'list-index',
    
        // Timeline
        'timeline',
    
        // Tabs
        'tabs',
    
        // Panel
        'panel',
    
        // Card
        'card',
    
        // Chip
        'chip',
    
        // Form Components
        'form',
        'input',
        'checkbox',
        'radio',
        'toggle',
        'range',
        'stepper',
        'smart-select',
    
        // Grid
        'grid',
    
        // Pickers
        'calendar',
        'picker',
    
        // Page Components
        'infinite-scroll',
        'pull-to-refresh',
        'lazy',
    
        // Data table
        'data-table',
    
        // FAB
        'fab',
    
        // Searchbar
        'searchbar',
    
        // Messages
        'messages',
        'messagebar',
    
        // Swiper
        'swiper',
    
        // Photo Browser
        'photo-browser',
    
        // Notifications
        'notification',
    
        // Autocomplete
        'autocomplete',
    
        // Tooltip
        'tooltip',
    
        // Gauge
        'gauge',
    
        // Skeleton
        'skeleton',
    
        // Menu
        'menu',
    
        // Color Picker
        'color-picker',
    
        // Tree View
        'treeview',
    
        // WYSIWYG Editor
        'text-editor',
    
        // Pie Chart
        'pie-chart',
    
        // Area Chart
        'area-chart',
    
        // Breadcrumbs
        'breadcrumbs',
    
        // Elevation
        'elevation',
    
        // Typography
        'typography',
      ],
      // include/exclude dark theme styles
      darkTheme: true,
      // include/exclude light theme styles
      lightTheme: true,
      // include/exclude themes
      themes: [
        'ios',
        'md',
        'aurora',
      ],
      // modify colors
      themeColor: '#007aff',
      colors: {
        red: '#ff3b30',
        green: '#4cd964',
        blue: '#2196f3',
        pink: '#ff2d55',
        yellow: '#ffcc00',
        orange: '#ff9500',
        purple: '#9c27b0',
        deeppurple: '#673ab7',
        lightblue: '#5ac8fa',
        teal: '#009688',
        lime: '#cddc39',
        deeporange: '#ff6b22',
        gray: '#8e8e93',
        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-core: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/components/searchbar';
import Calendar from 'framework7/components/calendar';
import Popup from 'framework7/components/popup';

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

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

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

ComponentPath
Appbarframework7/components/appbar
Dialogframework7/components/dialog
Popupframework7/components/popup
LoginScreenframework7/components/login-screen
Popoverframework7/components/popover
Actionsframework7/components/actions
Sheetframework7/components/sheet
Toastframework7/components/toast
Preloaderframework7/components/preloader
Progressbarframework7/components/progressbar
Sortableframework7/components/sortable
Swipeoutframework7/components/swipeout
Accordionframework7/components/accordion
ContactsListframework7/components/contacts-list
VirtualListframework7/components/virtual-list
ListIndexframework7/components/list-index
Timelineframework7/components/timeline
Tabsframework7/components/tabs
Panelframework7/components/panel
Cardframework7/components/card
Chipframework7/components/chip
Formframework7/components/form
Inputframework7/components/input
Checkboxframework7/components/checkbox
Radioframework7/components/radio
Toggleframework7/components/toggle
Rangeframework7/components/range
Stepperframework7/components/stepper
SmartSelectframework7/components/smart-select
Gridframework7/components/grid
Calendarframework7/components/calendar
Pickerframework7/components/picker
InfiniteScrollframework7/components/infinite-scroll
PullToRefreshframework7/components/pull-to-refresh
Lazyframework7/components/lazy
DataTableframework7/components/data-table
Fabframework7/components/fab
Searchbarframework7/components/searchbar
Messagesframework7/components/messages
Messagebarframework7/components/messagebar
Swiperframework7/components/swiper
PhotoBrowserframework7/components/photo-browser
Notificationframework7/components/notification
Autocompleteframework7/components/autocomplete
Tooltipframework7/components/tooltip
Gaugeframework7/components/gauge
Skeletonframework7/components/skeleton
Menuframework7/components/menu
ColorPickerframework7/components/color-picker
Treeviewframework7/components/treeview
Text Editorframework7/components/text-editor
Pie Chartframework7/components/pie-chart
Area Chartframework7/components/area-chart
Breadcrumbsframework7/components/breadcrumbs
Typographyframework7/components/typography

Less.js

Framework7 styles are built with Less.js. 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:

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

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

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

// include/exclude themes
@includeIosTheme: true;
@includeMdTheme: true;
@includeAuroraTheme: true;

// include/exclude dark theme
@includeDarkTheme: true;
// include/exclude light theme
@includeLightTheme: true;

// Theme color
@themeColor: #007aff;

// Extra colors
@colors: {
  red: #ff3b30;
  green: #4cd964;
  blue: #2196f3;
  pink: #ff2d55;
  yellow: #ffcc00;
  orange: #ff9500;
  purple: #9c27b0;
  deeppurple: #673ab7;
  lightblue: #5ac8fa;
  teal: #009688;
  lime: #cddc39;
  deeporange: #ff6b22;
  gray: #8e8e93;
  white: #ffffff;
  black: #000000;
};

// change to true to generate RTL styles
@rtl: false;