Depending on your preference and the framework you are using, Mobiscroll can be loaded a couple of different ways. At it’s core it’s a Javascript library built out of
CSS files
JS files
font icons
Different packages
With Production builds everything will be packaged in a single CSS and JS file. The font icons will be in the CSS folder as well, but don't need to be loaded separately.
With Development builds you'll get the every module as a separate file that you can either include manually by listing all files or with ES6 imports.
The Trial version is similar to the production build (but comes with limitations), you'll be getting the CSS and JS resources.
You can load the files in in three diffreent ways:
1. Including everything in the <head>
Depending on your package you'll be mostly loading the CSS and JS files here.
<link href="CSS/mobiscroll.javascript.min.css" rel=“stylesheet">
<script src="JS/mobiscroll.javascript.min.js"></script>
For instructions on how to load the trial please see the quickstart guide.
2. Using module loaders
The production builds implement the Universal Module Definition (UMD) pattern, meaning that it can be used with module loaders supporting the Asynchronous Module Definition (AMD) (e.g. RequireJS, Webpack, SystemJS) or CommonJS (e.g. Browserify, Webpack, SystemJS) syntax. Learn more and see examples in the docs.
3. Using ES6 imports
You can load the components as stand-alone modules with ES6 imports. Development builds can be downloaded with the Complete license - more information on licensing here - with support for module bundlers (e.g. Webpack, Rollup or Browserify). The difference between UMD definitions and ES6 modules is that the latter supports the loading of separate components instead of a monolithic package. Learn more about ES6 modules in the docs.