Message plugin

Version 2.1.0

Frontfire UI provides a set of message bar styles that can be used to inform the user about success or error messages at different levels.

Messages, or message boxes, can be used to highlight important or informative notifications to the user. They are often used at the top of a form to inform the user about the issues that occurred while processing the form data provided. There are several message levels, ordered by severity. The described CSS classes can be added to <div> or <p> elements.

This plugin is available in the Minimal and Complete bundles.

Message styles

These are the default message styles. All messages must have the message CSS class. Depending on the level, you should also add one of the critical, error, warning, information or success classes. The transparent class is used for messages without any background or padding. It is most useful with an icon.

The message box colours can be customised with the CSS variables --critical-background, --critical-color, --error-background, --error-color, --warning-background, --warning-color, --information-background, --information-color, --success-background and --success-color.

Something terrible happened that prevents the program from functioning or causes data loss. Read the details. This is a critical message.

Something didn’t work as expected but we landed safely. Learn how to avoid that. This is an error message.

Something doesn’t look as expected, it would likely go wrong if we tried that, but maybe not. Here’s the manual. This is a warning message.

We’d like to inform you about a noticeable event. The details wait for you in the log. This is an information message.

Yay! The operation is completed. Look how we did that. This is a success message.

Nothing too spectacular to report. Here’s a link. This is a transparent regular message.

These message type CSS classes are nothing fancy, you can also create your own and use them in the same way if you like.

Messages with an icon

The icon needs to be included in the markup manually, so you have total freedom about whether or not and which icon from which source (graphics, font) to use. When using an icon, the additional icon CSS class must be applied to provide some space at the left side.

exclamation-triangle-fill Icons make messages more visually recognisable. This is a warning message with an icon.
This is the second line to show the indentation.

check-bold Here’s another one to confirm your operation. This is a success message with an icon.
You could individually style the icon if you wish, as shown here. But pay attention to the dark theme or better use a CSS class for the icon style (not shown here).

check-shield These unobtrusive messages become more useful with a little artwork. This is a transparent regular message with an icon.
Again a second line to show the indentation.

Closable messages

A message can be discarded by the user by clicking on a close button, if you add the closable CSS class to the message element or call the closableMessage() plugin method on it.

This is a simple error. You can discard it after reading it or correcting the cause.

heart Your action was processed and everything is fine. You can now close this message.
This is the second line to show the indentation.

check-shield Transparent messages have another use with the close button.

A warning message that won’t fade out but disappear instantly when closed.

Plugin methods

This plugin provides methods to control the closable message.

close

close() → this

Closes the selected message as if the close button was clicked.

F("#message").closableMessage.close();