All Collections
Mobiscroll products and tools
Download Builder
Download Builder

Create modular builds and fine tune your download packages

Levi Kovacs avatar
Written by Levi Kovacs
Updated over a week ago

What is the Download Builder?

Select only what you need with the download builder and reduce weight when building your packages. The download builder is a visual step-by-step editor for creating bundled CSS and JS resource files that you can use in your projects.

What can be customized?

Depending on your license you might have access to a number of resources. You can build your packages by picking from the following:

  • Components - select which components you would like to include.

  • Framework - select the Framework you are building with. Pick from plain Javascript, jQuery, Angular JS, Angular and React.

  • Themes - select which themes to include in your build. Here you can create and select custom themes as well.

  • Icon sets - select and create custom icon sets. It is advised to only download what you are actually using to keep the file size to a minimum.

  • Languages - select the languages you want to support in your build.

  • Compression level - You can either download production builds with minified code or development builds with full-on ES6 modules and uncompressed code (only available with the Complete license).

  • Version - Select the version you are downloading.

Picking Components

All controls available with your license will show up here. If you don't see a control that you would like to include, you can purchase a license for it or upgrade your existing license.

Selecting a Framework

The framework selection will show up for license holders with access to multiple frameworks. If you don't see it, you can ignore it, everything is set up for you in the background.

Selecting the Themes

You can select one or more base and custom themes. This is also the place where you can access the Theme Builder. If you are looking to use the auto-theme feature of Mobiscroll, make sure to select at least one theme per supported platform. For example when building for iOS and Android, select one theme for each (custom themes included). Setting theme: 'auto' tells the library to load the theme depending on the platform. We recommend only including the themes you will be needing to reduce the build size.

Icon Sets

Create and download custom icon sets. You can select from over 2500 icons and several icon packs. The icons can be used with Mobiscroll components and general markup alike. As a general rule don't overload your build by selecting all icon packs.

Languages

Select which language packs to include. Besides the UI copy translation, these settings include localization, date and time formats, rtl settings and more. If you don't find the language you need, simply create your own language file and include it after Mobiscroll.

Version and Compression level

Finally select the version you would like to download. We recommend to download the latest version if possible, compatibility fixes and improvements are always pushed out.

Tips on optimizing and reducing the size of packages

When testing Mobiscroll, the file-size of the trial can be a little off-putting. While the trial build contains all components, themes and languages, it also contains extra code for security. It is not an optimized file, but bloated with extra weight. You can read more about the differences between the licensed product and the trial.

As a comparison the Trial build of Mobiscroll for jQuery is 

  • 214KB gzipped (JS: 364KB, CSS: 275KB unzipped) 

while the optimized build for the Date & Time is 

  • 30KB gzipped (JS: 52KB, CSS: 25KB unzipped)

Adding another component won't double the size, since there is a lot of modularity behind the scenes. As an example the Date & Time with the Select will result in a

  • 33KB gzipped file (only 3KB in plus)

Here are a couple of tips on how to reduce the size of your build

  1. Include only the components you are using at the moment. If you need more functionality, you can always build another package.

  2. Select only the themes you want to use. If you are adding custom themes, you don't need to include the base theme too. For example if you have a custom iOS theme, don't need to include the base iOS theme as well.

  3. Don't go overboard with the icon pack. It is OK to include multiple icons, however don't select and download multiple sets. Cherry picking helps in reducing the size.

  4. Finally, include only the languages you want to support.

NOTE: The download builder is only available for developers who have a license associated with their account. Learn more about the different licensing options and seats.

What's next?

Did this answer your question?