Frontfire documentation

Installation

Version 2.1.0

To use Frontfire on a web page, its script and style files must be included. There are different options how to select the files and where to include them in the HTML document structure.

In any case you are expected to upload the included files to your web server or provide them with your application. There are no public cloud hosting or CDN offerings and for performance, availability and privacy reasons, it is not recommended to use such external services.

Single file

Apart from the total selection of features, the toolkit is built in two variants for the JavaScript files. The CSS files are always the same.

With the single file variant, all toolkit levels and dependencies are compiled into a single JavaScript file. It allows the simplest usage as you just include one JavaScript and one CSS file and have all the bundle’s features available. It also further reduces the transfer size due to combined compression advantages. This is the recommended installation method.

Frontfire Core

To use Frontfire Core with a single file, write this:

<script src="frontfire-core-singlefile.min.js"></script>

This includes the file arraylist.js.

Frontfire UI Minimal

To use the Frontfire UI Minimal bundle with a single file, write this:

<script src="frontfire-ui-minimal-singlefile.min.js"></script> <link rel="stylesheet" href="frontfire-ui-minimal.min.css">

Frontfire UI Complete

To use the Frontfire UI Complete bundle with a single file, write this:

<script src="frontfire-ui-complete-singlefile.min.js"></script> <link rel="stylesheet" href="frontfire-ui-complete.min.css">

Separate files

With separate files, you include each of the toolkit levels as a separate file. This gives you the option to load just the parts needed for a specific web view. However, it also means that more files will be loaded by the browser which can slow down page loading.

The order of including the script files is important because some of them depend on others which have to be loaded before. Usually, the frontfire-core file needs arraylist, and the ui files need core and color.

Frontfire Core

To use Frontfire Core with separate files, write this:

<script src="arraylist.min.js"></script> <script src="frontfire-core.min.js"></script>

The files color.js and datacolor.js are optional, it depends on your usage.

Frontfire UI Minimal

To use the Frontfire UI Minimal with separate files, write this:

<script src="arraylist.min.js"></script> <script src="color.min.js"></script> <script src="frontfire-core.min.js"></script> <script src="frontfire-ui-minimal.min.js"></script> <link rel="stylesheet" href="frontfire-ui-minimal.min.css">

The file datacolor.js is optional, it depends on your usage.

Frontfire UI Complete

To use the Frontfire UI Complete with separate files, write this:

<script src="arraylist.min.js"></script> <script src="color.min.js"></script> <script src="frontfire-core.min.js"></script> <script src="frontfire-ui-complete.min.js"></script> <link rel="stylesheet" href="frontfire-ui-complete.min.css">

The file datacolor.js is optional, it depends on your usage.

(You can also use frontfire-core-singlefile.js and frontfire-ui-complete/minimal.js together.)

Placement

It is best-practice to include all stylesheets at the end of the HTML <head> and all scripts at the end of the HTML <body> element. Then include your site-specific styles and scripts after the library files to be able to customise the library’s styles and build upon its scripts.

Also make sure you set a correct doctype to set the HTML parser in standards mode. Failing to do so leaves the parser in the old quirks mode which can have unpredictable results, also for JavaScript code.

<!doctype html> <html> <head> <!-- metadata --> ... <link rel="stylesheet" href="lib/frontfire/css/frontfire-ui-complete.min.css"> <!-- followed by your site-specific styles: --> <link rel="stylesheet" href="css/site.min.css"> </head> <body> <!-- content --> ... <script src="lib/frontfire/js/frontfire-ui-complete-singlefile.min.js"></script> <!-- followed by your site-specific scripts: --> <script src="js/site.min.js"></script> </body> </html>

See the Autostart page for more details about the placement of script files.

Debugging

For debugging Frontfire, it can help to use the non-minified files. Even though source maps are provided, they can only resolve source files and line numbers but not show the original function and variable names in stack traces and error messages. To switch to the unminified files, remove the .min part of each JavaScript and CSS file name. Examples: