Since version 1.0.0 Framework7 comes with Gulp builder that allows to build custom library version where you may include only required components/modules. We need the following:
Download and unzip Framework7 GitHub repository to local folder
Install Node.js (if not installed)
Install Gulp (if not installed) by executing the following command in terminal:
$ npm install --global gulp
Now, we need to install required dependencies. Go to the folder with downloaded and unzipped Framework7 repository and execute in terminal:
$ npm install
Now, we are ready to build custom version of Framework7. We need to execute gulp custom
command and pass components/modules that we want to include as argument. For example, if we want to include just Accordion and Tabs:
$ gulp custom -accordion,tabs
That is all. Now you should see new custom/
folder that will contain custom JS and CSS files and their minified versions
Here is the list of all additional to core components that you can use for custom build:
accordion | Accordion component |
searchbar | Search Bar component |
messages | Includes Messages and Message Bar components |
modals | This includes all overlays components: Modal, Popup, Popover, Action Sheet and Login Screen |
swipeout | Swipeout component |
sortable | Sortable component |
cards | Cards component |
smart-select | Smart Select component |
virtual-list | Virtual List component |
pull-to-refresh | Pull To Refresh component |
infinite-scroll | Infinite Scroll component |
scroll-toolbars | Hide Bars On Scroll component |
tabs | Tabs component |
fast-clicks | This library required to remove 300ms click delay in mobile browser. You may not include it if you want to use third-party Fast Clicks library |
forms | Forms logic. Includes Form Storate, Form Data and Ajax Form Submit |
push-state | Push State logic |
progressbar | Progress Bar component |
autocomplete | Autocomplete component |
swiper | Swiper Slider component |
photo-browser | Photo Browser component. Slider is also will be installed, because it is required for Photo Browser. |
notifications | Notifications component |
picker | Picker component |
calendar | Calendar / Datepicker component |
If you don't want to include any of this components, then just execute "gulp custom" without any arguments:
$ gulp custom