Framework7 Custom Build

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:

  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. 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
    Note, that there shouldn't be spaces between comma and components name

  6. That is all. Now you should see new custom/ folder that will contain custom JS and CSS files and their minified versions

Available Components/Modules

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

Only Core

If you don't want to include any of this components, then just execute "gulp custom" without any arguments:

$ gulp custom