Autostart
Frontfire UI provides styles and extended behaviours for commonly used elements and applies some of them automatically.
Default styles
When using the Frontfire CSS file, some commonly used HTML elements are restyled to give them a modern and consistent look. Many of the styles can be configured with CSS variables or additional CSS classes. The elements that are restyled without additional CSS classes include:
<a>(in Typography)<body>(in Page and Typography)<button>(in Form and Typography)<code>(in Typography)<form>(in Form)<h1>to<h6>(in Typography)<hr>(in Typography and Form)<html>(in Page and Typography)<input>(in Form and Typography)<kbd>(in Typography)<label>(in Form)<p>(in Typography)<pre>(in Typography)<samp>(in Typography)<select>(in Selectable and Typography)<table>(in Table)<td>,<th>(in Table)<textarea>(in Form and Typography)<tt>(in Typography)
All of these default styles are defined with zero specificity by the :where() selector.
That means that any other CSS rule for any of these elements (e.g. in your stylesheets or third-party components) will always override Frontfire’s defaults, no !important needed.
JavaScript components
The autostart() and frontfire() methods on a Frontfire instance enable Frontfire UI features and behaviours on all default elements and those with corresponding CSS classes.
They can be called directly for newly created elements.
Note:
The autostart() method is also called when loading Frontfire UI’s JavaScript file.
In this case, it is assumed that the JavaScript file is included at the end of the document’s <body> after all visible elements (preferred) or in the document <head>.
If included anywhere else (like at the beginning of <body> or before some visible elements in the document, it will not apply the default features to all following elements.
Then you have to call the method yourself after all relevant elements have been added to the page.
See the Installation page for an example.
Opt-out
To undo the effects of the default styles and to prevent the JavaScript components from being activated automatically, add the no-frontfire CSS class to the desired elements of external components or templates.
Frontfire UI will automatically apply certain styles and features on commonly used elements.
Sometimes, these implicit styles also apply to elements without adding any CSS class for simple use (see the list of elements above).
But external components (third-party libraries) may not be prepared for all the style properties that Frontfire uses, so it becomes necessary to undo all Frontfire styles for these parts of the page.
Also, Frontfire-added features like numeric spinner inputs must not be applied for parts of the page that serve as a template for dynamically created elements because the cloning of the template elements would destroy their behaviour (like from event handlers).
For this reason, the no-frontfire CSS class must be added to such external components or template elements.
It can be applied to any parent element or the affected element directly.
There is no undo of this undo, so once the styles have been disabled, they cannot be reactivated in a descendent element.
Note that the no-frontfire class only applies to the element and its descendents.
If the element of an external component is moved to a different part of the document, like in a modal or dropdown, this class may no longer apply.
Make sure that the class is set at the correct places, ideally at the external component itself so it cannot get lost.
For the JavaScript-implemented features, this class only disables their automatic activation at page load time with the autostart() method.
This can be done later by calling the frontfire() plugin method on the desired elements, for example after cloning the template elements into visible data rows or tab pages.
To activate the disabled Frontfire styles later, this CSS class can be removed by code, which the frontfire() method already does.