Frontfire Web Frontend Toolkit

Version 2.1.0

The Frontfire Web Frontend Toolkit offers essential styles and effects combined with a consistent set of interactive widgets and layout utilities. It is suitable for web pages and web applications that need a modern and consistent look and feel and use responsive design to work on all devices and screen sizes. All interactions are fully touch-aware and work with any type of pointing device. The default style equally supports light and dark theme and can be customised with CSS variables.

Frontfire is released under the terms of the MIT licence. See the complete licence text in the code repository for details.

Get Frontfire Browse source code

See the change log for all differences between release versions.

The API documentation describes all class methods and properties in detail and includes some examples. While Frontfire version 1 (which as a work in progress never actually used version numbers) was made as a jQuery plugin, version 2 comes in two parts.

Frontfire Core

This part largely replaces those parts of jQuery that are not already covered by modern JavaScript. It can be used independently of the UI part. The ArrayList and Color classes can also be used independently of Frontfire, but are maintained and documented with it.

ArrayList API reference A comfortable and comprehensive array collection Frontfire Core API reference Easy DOM access on a low level, based on ArrayList Color API reference Colour conversion and computation functions DataColor API reference Distinguishable colour palette for data visualisation

Frontfire UI

This part builds with styles and plugins upon Core and provides UI widgets and interaction primitives. The Complete bundle contains all of the plugins, the Minimal bundle only the most essential ones. A good first read are the chapters about Installation and then the Page and Typography modules.

Note that Frontfire UI is not an add-in for any existing web page. It relies on CSS reset styles and alters the basic appearance of many standard HTML elements to give them a consistent style without drowning the document in CSS classes. Read the Autostart documentation to learn more about this and how to selectively opt out.

Minimal bundle Complete bundle

Accordion Plugin demo Separately expandable sections view Carousel Plugin demo Horizontal layout of elements with swipe interaction ColorPicker Plugin demo Colour picker input fields and modal view Draggable Plugin demo Making elements draggable on the page Dropdown Plugin demo Dropdown panel that opens besides an element Form Styles/plugins demo Responsive form layout system with text fields and buttons Gallery Plugin demo Image gallery with aligned row lengths Image Styles demo Responsive image alignment, sizing and decorations Menu Plugin demo Menu bars with dropdown submenus Message Plugin demo Message bar styles for different levels Modal Plugin demo Modal panel that overlays the page Notification Plugin demo Quick status message that disappears after a timeout OffCanvas Plugin demo Panel that slides in from the side of the page Page Styles demo Basic page layout styles and document structure Progressbar Plugin demo Progress bar with value display Resizable Plugin demo Making elements resizable Selectable Plugin demo List item selection, with dropdown Slider Plugin demo Numeric range value selection Sortable Plugin demo Sort child elements by drag&drop Table Styles/plugins demo Table styles and layouts Tabs Plugin demo Switchable pages with tab headers TimePicker Plugin demo Date and time picker input fields ToggleSwitch Plugin demo Toggle switch that can replace a checkbox Tree Plugin demo Hierarchical tree item selection, with drag & drop Typography Styles demo Elementary typography styles that encourage design best practices WheelScrolling Plugin demo Custom mouse wheel scrolling behaviour

The following pages describe general topics or contain full reference lists.

Installation Guide Include Frontfire scripts and styles on a page Autostart Guide Default styles and class-based activation of plugins Plugin options Guide Methods to set options when using plugins CSS classes API reference Complete class list of all styles and plugins CSS variables API reference Complete variables list of all plugins for configuration