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 = {
     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',
       'stepper',
       'smart-select',
       'grid',
       'calendar',
       'picker',
       'infinite-scroll',
       'pull-to-refresh',
       'lazy',
       'data-table',
       'fab',
       'searchbar',
       'messages',
       'messagebar',
       'swiper',
       'photo-browser',
       'notification',
       'autocomplete',
       'tooltip',
       'gauge',
       '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-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

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

   $ npm run build-core:dev

   The result is available in build/ folder.

10. To build production version of Framework7:

    $ npm run build-core:prod

    Production version will be available in dist/ folder.

11. Run Kitchen Sink with development environment

    $ npm run core:dev

12. Run Kitchen Sink with Production environment

    $ npm run core:prod

13. Kitchen Sink is live

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

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/searchbar.js';
import Calendar from 'framework7/components/calendar/calendar.js';
import Popup from 'framework7/components/popup/popup.js';

// 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):

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

Less.js

Framework7 styles are build 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 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');
@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:

// core
@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');
@import url('path/to/node_modules/framework7/components/popup/popup.less');

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

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

// iOS theme color
@themeColorIos: #007aff;
// MD theme color
@themeColorMd: #2196f3;

// Extra colors for iOS theme
@colorsIos: red #ff3b30, green #4cd964, blue #007aff, pink #ff2d55, yellow #ffcc00, orange #ff9500, gray #8e8e93, white #ffffff, black #000000;

// Extra colors for MD theme
@colorsMd: red #f44336, green #4caf50, blue #2196f3, pink #e91e63, yellow #ffeb3b, orange #ff9800, gray #9e9e9e, white #ffffff, black #000000;

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