Frontfire UI CSS classes documentation

accordion

Elements: all (from Accordion)

Defines an accordion. See the plugin page for examples.

See also: no-background, no-icons, expanded

active

Elements: <li> (within <ul class="menu">) (from Menu)

Shows a menu item as active. See the plugin page for examples.

See also: menu

Elements: <div> (within <* class="tabs">) (from Tabs)

Sets the tab page as initially active. See the plugin page for examples.

See also: tabs

aside-left

Elements: <* class="sticky-aside-container"> (from Typography)

Moves the sticky aside column to the left side. By default, it is on the right side. See the plugin page for examples.

auto-height

Elements: <textarea> (from Form)

Makes each selected textarea element automatically adjust its height to its content. See the plugin page for examples.

auto-select

Elements: text input fields (from Form)

Selects the content of an input field when it is focused or clicked. See the plugin page for examples.

big

Elements: <* class="progressbar"> (from Progressbar)

Changes the size of the progress bar to big.

See also: progressbar, tiny, small, large

big-links

Elements: <table> (from Table)

Expands all links (<a>) that are a direct child of a table cell (<td>) to the entire table cell. This is increases the clickable or touch area of a link.

Equivalent style: display: block;

bordered

Elements: <* class="dropdown"> (from Dropdown)

Adds a border to the dropdown element. See the plugin page for examples.

both

Elements: <ul class="menu"> (from Menu)

Allows aligning menu items at the left and right end. See the plugin page for examples.

bottom

Elements: <table>, <td>, <th>, <tr> (from Table)

Vertically aligns the content of a table cell at the bottom.

Equivalent style: vertical-align: bottom;

button

Elements: <a> (from Form)

Changes the appearance of the hyperlink (<a>) to a button. This allows adding regular links in a row with buttons and give them the same look. However, they are not quite the same because their text selection and drag behaviour remains unchanged and differs from that of real button elements. See the plugin page.

Elements: <* class="progressbar"> (from Progressbar)

Changes the height of the progress bar to match a button or text field.

buttons

Elements: <div>, <span> (from Form)

Holds the buttons that are placed in a row of a form. It should be used for form buttons to give them proper spacing. See the plugin page for examples.

carousel

Elements: all (from Carousel)

Defines a carousel. See the plugin page for examples.

caution

Elements: <button>, <a class="button"> (from Form)

Changes the appearance of the button to give it a colour that implies danger. This can be used for actions that have dangerous results if used accidentally, like deleting data. You should always request a separate confirmation from the user before actually executing the dangerous action, or alternatively provide a quick and easy method to undo it. By default they use a red colour instead of grey, and have an inverted text colour.

center

Elements: <html> (from Page)

Horizontally centres the content of elements with the page-width class on the page. Adding this class to the document also forces a vertical scrollbar to be shown, no matter if the content is longer than a window height or not. This is to ensure that horizontally centered content does not jump to the side when navigating between pages with and without a scrollbar (which takes some of the available width in most desktop browsers) because of their length.

circle

Elements: <img>, <svg> (from Image)

Clips the square image to a circle. Non-square images will generate an ellipse shape.

clearfix

Elements: all (from Typography)

Adds a float break before and after the element.

Equivalent style: similar to clear: both;

closable

Elements: <div class="message">, <p class="message"> (from Message)

Make a message box closable and adds a small close button at the right side. See the plugin page for examples.

code

Elements: <div> (from Typography)

Defines a source code block. Sets a monospace, or fixed-width font and a padding for the element and changes its colour and wrapping to match the <code> element.

collapsible-column

Elements: <th> (within <table class="overflow-columns">) (from Table)

Marks a table column that can be collapsed when the table width exceeds the available space, i.e. overflows. This class is only set for the header cell, not for all body cells. The collapse order of the columns is described on the plugin page. See the plugin page for examples.

color-picker

Elements: <div> (from ColorPicker)

Shows a color picker on the element. This class has no visible style but is only used in the autostart selector to call the colorPicker() plugin method on the element. See the plugin page for examples.

Elements: <input> (from ColorPicker)

Converts each selected input element into a text field with colour picker button. This class has no visible style but is only used in the autostart selector to call the colorInput() plugin method on the element. See the plugin page for examples.

compact

Elements: <table> (from Table)

Reduces the cell padding of a table and removes the inner horizontal and vertical grid lines. The default for tables is to have inner horizontal and vertical grid lines between the cells.

critical

Elements: <div class="message">, <p class="message"> (from Message)

Shows a critical message box.

dark

Elements: all

Changes the element to the dark colour theme. It uses a dark grey background (not black to be easier on the eyes) and a bright text colour (again, not quite white). Most elements and UI widgets that have this class or are descendants of an element with this class should adapt to the dark theme and change their appearance accordingly. To put the entire page into the dark theme, apply this class to the <html> element.

dark-invert

Elements: all (from Image)

Inverts the image or other element in the dark theme. This is most useful for icons or logos with a black colour on a white or transparent background.

default

Elements: <button>, <a class="button"> (from Form)

Changes the appearance of the button to make it pop out and draw attention on it. This can be used for the default action of a form that is invoked when pressing the Enter key, usually submitting the form with the first action like saving the input. It can also be used for Call-to-Action (CTA) buttons that are designed to prompt an immediate response. By default they use a blue colour instead of grey, and have an inverted text colour.

double-gap

Elements: <div> (from Image)

Doubles the grid gap in an image grid to 2rem.

double-margin

Elements: <div class="p">, <hr>, <p>, <table class="p"> (from Typography)

Doubles the element’s top and bottom margin. Sometimes certain elements just need a little more space.

Equivalent style: margin-top: 2em; margin-bottom: 2em;

error

Elements: <div class="message">, <p class="message"> (from Message)

Shows an error message box.

Elements: <* class="progressbar"> (from Progressbar)

Changes the bar colour of the progress bar to an error colour.

expanded

Elements: <div> (within <* class="accordion">) (from Accordion)

Expands an item in the accordion at initialisation. See the plugin page for examples and exceptions.

See also: accordion

fast

Elements: <i class="loading"> (from Typography)

Changes the animation speed of the rotating loading indicator to fast.

field-validation-error

Elements: all (from Form)

Marks the element that contains the validation error message for a specific input field. See the plugin page for examples.

first-column

Elements: <td> (from Table)

Specifies that the table cell is in the first visible table column. The default selector for the first column fails if there are hidden columns further left. In this case, use this class to correct the table style. It is not used for <th> elements because they normally have a background colour where the padding is still needed.

This class is set automatically with the F.updateFirstLastColumn() method. Call it on the <table> element after changing the visibility of table columns.

first-row

Elements: <tr> (from Table)

Specifies that the table row is in the first visible table row. The default selector for the first row fails if there are hidden rows further up. In this case, use this class to correct the table style.

This class is set automatically with the F.updateFirstLastRow() method. Call it on the <tbody> element after changing the visibility of table rows.

flex

Elements: <* class="tabs"> (from Tabs)

Sets the display: flex style for the tabs container and allows stretching it and scrolling in a tab page. See the plugin page for examples.

See also: tabs

form-trap

Elements: all (from Form)

Hides a form field that no user should fill out and bots love. The input element that this class is applied to should stand alone with no supplementary labels and not in the standard form row layout because those would not be hidden. The server-side script can check if something was entered into this hidden field and then reject the form data as spam. Because a user could not fill out the hidden field, the form must have been submitted by a bot.

form-row

Elements: block (from Form)

All fields in a standard form layout are placed in an element with this class. This class generates normal 3-line form rows with labels and (optional) validation messages. See the plugin page for examples.

form-single-row

Elements: block (from Form)

All fields in a standard form layout are placed in an element with this class. This class generates a layout without labels or validation messages, just input fields. It also allows custom responsive layouts. See the plugin page for examples. The field gap can be removed with the additional narrow class.

full-page

Elements: <div class="modal"> (from Modal)

Expands the modal to use almost the full page.

full-page-width

Elements: block (from Page)

Keeps content to the full page width and adds a horizontal padding on the left and right side. See the plugin page for a comprehensive description of this class.

full-width

Elements: <table> (from Table)

Expands the table to the full available width. Normally, a table will only use the width it needs for its content.

Equivalent style: width: 100%;

Elements: <img>, <svg> (from Image)

Expands the image to the full available width, limited to the window height.

gallery

Elements: all (from Gallery)

Defines an image gallery. See the plugin page for examples.

group

Elements: <div class="buttons">, <span class="buttons">, <span> (within <div class="buttons"> or segmented-input class) (from Form)

Places multiple buttons in a form buttons row or a segmented input together without a gap between them. Instead, a separator line is displayed between the buttons. This indicates that a group of buttons belong together. See the plugin page for examples.

icon

Elements: <div class="message">, <p class="message"> (from Message)

Aligns an icon at the left side of a message box and indents the text so that it remains aligned. See the plugin page for examples.

icon-label

Elements: <div> (from Typography)

Displays an icon or loading indicator (as <i> element) with a text label below, horizontally centered. Use it in a structure like this:

<div class="icon-label"> <i class="loading"></i> Loading, please wait… </div>

icon-left

Elements: <* class="segmented-input"> (from Form)

Places an icon at the left end of the text field in the segmented input. See the plugin page for examples.

icon-only

Elements: <button>, <a class="button"> (from Form)

Removes the icon spacing for the icon in a button. This should be added to the button when it only contains an <i> icon and no text to avoid centering issues with the icon. See the plugin page for examples.

icon-right

Elements: <* class="segmented-input"> (from Form)

Places an icon at the right end of the text field in the segmented input. See the plugin page for examples.

image-center

Elements: <div> (from Image)

Horizontally centres the child image. Limits the image to the full available width and the window height. Used with image captions. See the plugin page for examples.

image-full-width

Elements: <div> (from Image)

Expands the child image to the full available width, limited to the window height. Used with image captions. See the plugin page for examples.

image-left

Elements: <div> (from Image)

Places the child image at the left side floating besides the text. Used with image captions. See the plugin page for examples.

image-overlay-text

Elements: <a>, <div> (from Image)

Defines a container for an image with a text overlay. See the plugin page for examples.

image-right

Elements: <div> (from Image)

Places the child image at the right side floating besides the text. Used with image captions. See the plugin page for examples.

image-x2

Elements: <div> (from Image)

Defines an image grid with 2 columns. See the plugin page for examples.

image-x3

Elements: <div> (from Image)

Defines an image grid with 3 columns. See the plugin page for examples.

image-x4

Elements: <div> (from Image)

Defines an image grid with 4 columns. See the plugin page for examples.

indent

Elements: <div> (within <* class="accordion">) (from Accordion)

Indents the the content of the section to the same horizontal position as the header. See the plugin page for examples.

See also: accordion

indent-checkbox

Elements: <label>, all that contain a checkbox (from Form)

Indents the label text for a checkbox so that it is aligned with the beginning of the first line, next to the checkbox. This changes the style of the target element to display: block. See the plugin page for examples.

information

Elements: <div class="message">, <p class="message"> (from Message)

Shows an information message box.

inline

Elements: <* class="progressbar"> (from Progressbar)

Places the progress bar in a line with other content.

inline-indicator

Elements: <* class="carousel"> (from Carousel)

Moves the item indicators inside the carousel items. See the plugin page for examples.

input-validation-error

Elements: <input>, <select>, <textarea> (from Form)

Indicates that there is a validation error in this input field. See the plugin page for examples.

invert

Elements: <span> (within <a|div class="image-overlay-text">) (from Image)

Inverts the colours of the image overlay text. See the plugin page for examples.

justify

Elements: <p> (from Typography)

Justifies the content of a paragraph to be aligned at the left and right edge, except for the last line.

Equivalent style: text-align: justify;

label

Elements: all (from Form)

In a parent element with the form-row class, it marks the element that displays the label of a form input field. See the plugin page for examples.

In a parent element with the segmented-input class, it marks an element that contains static text that is placed besides the input field. If combined with the no-background class in this context, the border and background of the label are removed.

Elements: all (within <div|span class="buttons">) (from Form)

Vertically centres a text label in a buttons row. See the plugin page for examples.

large

Elements: <i class="loading"> (from Typography)

Changes the size of the rotating loading indicator to large.

larger

Elements: all (from Typography)

Increases the font size of the element a bit.

last-column

Elements: <td> (from Table)

Specifies that the table cell is in the last visible table column. The default selector for the last column fails if there are hidden columns further right. In this case, use this class to correct the table style. It is not used for <th> elements because they normally have a background colour where the padding is still needed.

This class is set automatically with the F.updateFirstLastColumn() method. Call it on the <table> element after changing the visibility of table columns.

last-row

Elements: <tr> (from Table)

Specifies that the table row is in the last visible table row. The default selector for the last row fails if there are hidden rows further down. In this case, use this class to correct the table style.

This class is set automatically with the F.updateFirstLastRow() method. Call it on the <tbody> element after changing the visibility of table rows.

left

Elements: <p> (from Typography)

Aligns the content of a paragraph on the left side.

Equivalent style: text-align: left;

link

Elements: <button>, <input> (buttons) (from Form)

Changes the appearance of the button to let it look like a regular hyperlink (<a>). However, they are not quite the same because their text selection and drag behaviour remains unchanged and differs from that of real hyperlink elements. See the plugin page.

loading

Elements: <i> (from Typography)

Displays a rotating loading indicator in the element. The size can be changed with the small, medium and large classes.

medium

Elements: <i class="loading"> (from Typography)

Changes the size of the rotating loading indicator to medium, which is a bit smaller than the default.

message

Elements: <div>, <p> (from Message)

The base class for message boxes. Should be combined with one of the severity level classes.

Elements: all (from Modal)

Defines the content of a modal. The element will be hidden. It only becomes visible when opening the modal with the modal() plugin function. See the plugin page for examples.

monospace

Elements: all (from Typography)

Sets a monospace, or fixed-width font for the element.

narrow

Elements: block (from Form)

Removes the field gap in a single-line form layout row.

narrow-center

Elements: <img>, <svg>, <div> (from Image)

Aligns the image in its own row horizontally centred, below the minimum screen width specified with a require-* class. The image must be normally floating, using the left or right class. For <div> elements, used with image captions or image grids.

narrow-full-width

Elements: <img>, <svg>, <div> (from Image)

Aligns the image in its own row horizontally expanded, below the minimum screen width specified with a require-* class. The image must be normally floating, using the left or right class. For <div> elements, used with image captions.

narrow-left

Elements: <img>, <svg>, <div> (from Image)

Aligns the image in its own row at the left side, below the minimum screen width specified with a require-* class. The image must be normally floating, using the left or right class. For <div> elements, used with image captions or image grids.

narrow-only

Elements: all (within button within <div|span class="buttons overflow-buttons">) (from Form)

Shows a button icon only when the button text was hidden due to width overflow. See the plugin page for examples.

narrow-right

Elements: <img>, <svg>, <div> (from Image)

Aligns the image in its own row at the right side, below the minimum screen width specified with a require-* class. The image must be normally floating, using the left or right class. For <div> elements, used with image captions or image grids.

narrow-x2

Elements: <div> (from Image)

Reduces the number of columns in an image grid to 2, below the minimum screen width specified with a require-* class.

no-background

Elements: <* class="label"> (within <* class="segmented-input">) (from Form)

Removes the border and background of a static label in a segmented input.

See also: accordion

no-border

Elements: <table> (from Table)

Removes the outer border of a table. The default for tables is to have a border.

See also: tabs

no-bottom-margin

Elements: all (from Typography)

Removes the default bottom margin of an element. This allows using paragraphs <p> as last element within a box, like a modal or tab.

Equivalent style: margin-bottom: 0;

no-frontfire

Elements: all (from Autostart)

Disables all Frontfire styles on HTML elements without a CSS class and also disables the automatic application of Frontfire plugins at page load time. See the plugin page for a more detailed explanation.

no-grid

Elements: <table> (from Table)

Removes the inner horizontal and vertical grid lines of a table. The default for tables is to have inner horizontal and vertical grid lines between the cells. This is a combination of the no-hgrid and no-vgrid classes.

no-hgrid

Elements: <table> (from Table)

Removes the inner horizontal grid lines of a table. The default for tables is to have inner horizontal and vertical grid lines between the cells.

no-icons

Elements: <* class="accordion"> (from Accordion)

Removes the icons from the accordion section headers. See the plugin page for examples.

See also: accordion

no-outer-padding

Elements: <table> (from Table)

Removes the outer cell padding towards the border of the table, but leaves the inner cell padding between cells intact. This is most useful in combination with no-border and without any cell background colours. It aligns the table content horizontally exactly with the surrounding text.

no-padding

Elements: <table> (from Table)

Removes all cell paddings of the table. It aligns the table content horizontally exactly with the surrounding text.

no-top-margin

Elements: all (from Typography)

Removes the default top margin of an element. This allows using the headers like <h2> or paragraphs <p> as first element within a box, like a modal or tab.

Equivalent style: margin-top: 0;

no-transitions

Elements: all (from Page)

Disables all transitions of elements with this class and all of their descendants (children, recursively).

no-validation

Elements: <* class="form-row"> (from Form)

Changes a form layout row so that no elements for the field validation message need to be inserted. See the plugin page for examples.

See also: form-row

no-vertical-margin

Elements: all (from Typography)

Removes the default top and bottom margin of an element. This is a combination of the no-top-margin and no-bottom-margin classes.

Equivalent style: margin-top: 0; margin-bottom: 0;

no-vgrid

Elements: <table> (from Table)

Removes the inner vertical grid lines of a table. The default for tables is to have inner horizontal and vertical grid lines between the cells.

not-dark

Elements: all

Reverts the element from the dark colour theme back to the light theme. This class is primarily meant to switch a small part of a mainly dark-themed element back to the light theme, for example a light content panel in a dark sidebar on a light page. Changing to the dark theme within an element with this not-dark class is unsupported but might work sometimes.

not-print

Elements: all (from Page)

Hides elements for printing.

nowrap

Elements: all (from Typography)

Prevents all white-space collapsing or line wrapping in the element.

Equivalent style: similar to white-space: nowrap;

off-canvas

Elements: all (from OffCanvas)

Defines the content of an off-canvas panel. The element will be hidden. It only becomes visible when opening the off-canvas with the offCanvas() plugin function. See the plugin page for examples.

overflow-button

Elements: <button> (within <td class="overflow-column">) (from Table)

Marks a button that opens the modal that contains the content of the collapsed columns. This button should also have the narrow and icon-only classes and contain a single <i> icon. See the plugin page for examples.

overflow-buttons

Elements: <div|span class="buttons"> (from Form)

Enables the overflow shrinking of a buttons row. See the plugin page for examples.

overflow-column

Elements: <th>, <td> (both within <table class="overflow-columns">) (from Table)

Marks a table column that contains the overflow button. Only a single column in a table must have this class, and all cells of the same column must have this class. See the plugin page for examples.

overflow-columns

Elements: <table> (from Table)

Enables the overflow columns of a table. See the plugin page for examples.

p

Elements: <div>, <table> (from Typography)

Adds a paragraph’s default top and bottom margin to the element that would otherwise have none. These elements cannot be used within a <p> element to use their vertical margin. Instead, add this class to the element.

Equivalent style: margin-top: 1em; margin-bottom: 1em;

page-width

Elements: block (from Page)

Restricts content to the default page width and adds a horizontal padding on the left and right side. See the plugin page for a comprehensive description of this class.

See also: full-page-width, center (for <html>), --page-width, --page-width-padding

pre-wrap

Elements: all (from Typography)

Prevents all white-space collapsing and preserves line breaks in the element.

Equivalent style: similar to white-space: pre-wrap;

print-only

Elements: all (from Page)

Displays elements only for printing.

progressbar

Elements: all (from Progressbar)

Defines a progress bar. See the plugin page for examples.

See also: error, warning, success, no-border, tiny, small, large, big, button, inline

radio-group

Elements: all (from Form)

Groups multiple radio buttons together with a gap between them. See the plugin page for examples.

repeat-button

Elements: <button>, <input type="button"> (from Form)

Makes each selected button trigger repeated click events while being pressed. See the plugin page for examples.

require-desktop

Elements: <* class="nowrap"> (from Typography)

Resets the white-space: nowrap; style of the element when the screen size is below the width of a desktop or laptop monitor.

The standard width limits of these responsive layout classes are:

Device class	Screen width range
Smartphones	0–540 pixels
Small tablets (7–8")	541–760 pixels
Tablets	761–900 pixels
Desktop/laptop monitors	901–1200 pixels
Wide monitors	1201 pixels up

These values are also made available in the CSS variables that start with “--breakpoint-”.

Elements: <* class="sticky-aside-container"> (from Typography)

Unfloats the side element and frees the side column when the screen size is below the width of a desktop or laptop monitor.

Elements: <* class="form-row"> (from Form)

Places all fields of the form row on a separate line, i.e. below each other, when the screen size is below the width of a desktop or laptop monitor.

See also: form-row

Elements: <img>, <svg>, <div> (from Image)

Un-floats the floating image, optionally with a caption, when the screen size is below the width of a desktop or laptop monitor. For image grids, the number of grid columns is reduced.

See also for all: require-minitab, require-tablet, require-wide

require-minitab

Elements: <* class="nowrap"> (from Typography)

Resets the white-space: nowrap; style of the element when the screen size is below the width of a small tablet.

Elements: <* class="sticky-aside-container"> (from Typography)

Unfloats the side element and frees the side column when the screen size is below the width of a small tablet.

Elements: <* class="form-row"> (from Form)

Places all fields of the form row on a separate line, i.e. below each other, when the screen size is below the width of a small tablet.

See also: form-row

Elements: <img>, <svg>, <div> (from Image)

Un-floats the floating image, optionally with a caption, when the screen size is below the width of a small tablet. For image grids, the number of grid columns is reduced.

See also for all: require-tablet, require-desktop, require-wide

require-tablet

Elements: <* class="nowrap"> (from Typography)

Resets the white-space: nowrap; style of the element when the screen size is below the width of a regular tablet.

Elements: <* class="sticky-aside-container"> (from Typography)

Unfloats the side element and frees the side column when the screen size is below the width of a regular tablet.

Elements: <* class="form-row"> (from Form)

Places all fields of the form row on a separate line, i.e. below each other, when the screen size is below the width of a regular tablet.

See also: form-row

Elements: <img>, <svg>, <div> (from Image)

Un-floats the floating image, optionally with a caption, when the screen size is below the width of a regular tablet. For image grids, the number of grid columns is reduced.

See also for all: require-minitab, require-desktop, require-wide

require-wide

Elements: <* class="nowrap"> (from Typography)

Resets the white-space: nowrap; style of the element when the screen size is below the width of a wide desktop monitor.

Elements: <* class="sticky-aside-container"> (from Typography)

Unfloats the side element and frees the side column when the screen size is below the width of a wide desktop monitor.

Elements: <* class="form-row"> (from Form)

Places all fields of the form row on a separate line, i.e. below each other, when the screen size is below the width of a wide desktop monitor.

See also: form-row

Elements: <img>, <svg>, <div> (from Image)

Un-floats the floating image, optionally with a caption, when the screen size is below the width of a wide desktop monitor. For image grids, the number of grid columns is reduced.

See also for all: require-minitab, require-tablet, require-desktop

reverse

Elements: <i class="loading"> (from Typography)

Reverses the animation direction of the rotating loading indicator.

right

Elements: <p> (from Typography)

Aligns the content of a paragraph on the right side.

Equivalent style: text-align: right;

same-height

Elements: all (from Tabs)

Extends the tab container to the height of the tallest tab page so that the container will not resize when switching tab pages. See the plugin page for examples.

See also: tabs

segmented-input

Elements: all (from Form)

Wraps an input element with a label that is placed before or after the input field, or with an icon that is placed at the left or right end within the input field. See the plugin page for examples.

See also: label, icon-left, icon-right, group

selectable

Elements: all (from Selectable)

Makes the child elements in each selected element selectable. See the plugin page for examples.

See also: no-border, transparent, narrow, selected, wrap

selectable-search-match

Elements: all (from Selectable)

Highlights the matching text of a selectable item during text search. This class is used by the selectable plugin and should only be redefined to change the highlighting appearance. It should not be used on elements directly.

selectable-search-no-match

Elements: all (from Selectable)

Highlights the longest matching text of a selectable item during text search, if there is no full match. This class is used by the selectable plugin and should only be redefined to change the highlighting appearance. It should not be used on elements directly.

selected

Elements: all (within <* class="selectable">) (from Selectable)

Marks a selection child item as selected. This must only be used for selectables that are not bound to an HTML <select> element. See the plugin page for examples.

shadow

Elements: <img>, <svg>, <* class="image-overlay-text"> (from Image)

Adds a slight drop shadow to the image to make it pop out a little.

simple-dimmer

Elements: <html> (from Page)

Disables the background blur filter of the background dimmer for devices with reduced rendering power.

slider

Elements: all (from Slider)

Creates a slider control for the element. See the plugin page for examples.

slow

Elements: <i class="loading"> (from Typography)

Changes the animation speed of the rotating loading indicator to slow.

small

Elements: <i class="loading"> (from Typography)

Changes the size of the rotating loading indicator to small.

small-indicator

Elements: <* class="carousel"> (from Carousel)

Displays the carousel item indicators at a reduced size. See the plugin page for examples.

smaller

Elements: all (from Typography)

Decreases the font size of the element a bit.

sortable

Elements: all (from Sortable)

Makes child elements sortable. See the plugin page for examples.

stay-open

Elements: <a> (within <ul class="menu">) (from Menu)

A link with this class will not close the submenu it is contained in. See the plugin page for examples.

See also: menu

sticky-aside

Elements: all (within <* class="sticky-aside-container">) (from Typography)

Defines the element to place at the side with a sticky position. See the plugin page for examples.

sticky-aside-container

Elements: all (from Typography)

Defines the position scope of a sticky aside element. See the plugin page for examples.

stretch

Elements: <li> (within <ul class="menu both">) (from Menu)

Expands an empty menu item to fill the gap between left-aligned and right-aligned items. See the plugin page for examples.

submenu-arrow

Elements: <ul> (from Menu)

Adds submenu indicator icons in the form of an arrow. See the plugin page for examples.

submenu-dots

Elements: <ul> (from Menu)

Adds submenu indicator icons in the form of dots. See the plugin page for examples.

success

Elements: <div class="message">, <p class="message"> (from Message)

Shows a success message box.

Elements: <* class="progressbar"> (from Progressbar)

Changes the bar colour of the progress bar to a success colour.

tabs

Elements: all (from Tabs)

Defines a tab container. See the plugin page for examples.

See also: active, same-height, no-border

tall-rows

Elements: <table> (from Table)

Expands all table cells to a minimum height that is the same as if there was a <button> element in the cell. This is increases the clickable or touch area of a link.

text

Elements: <li> (within <ul class="menu">) (from Menu)

Defines a menu item that has no <a> element. See the plugin page for examples.

See also: menu

thick

Elements: <i class="loading"> (from Typography)

Changes the width of the rotating loading indicator to thick.

thin

Elements: <i class="loading"> (from Typography)

Changes the width of the rotating loading indicator to thin.

thin-scrollbar

Elements: all (from Page)

Uses a thin scrollbar for the element.

tiny

Elements: <* class="progressbar"> (from Progressbar)

Changes the size of the progress bar to tiny.

See also: progressbar, small, large, big

toggle-button

Elements: <input type="checkbox"> (from Form)

Indicates that the checkbox shall be replaced by a toggle button that switches between an active and inactive state with each click. This class has no visible style but is only used in the autostart selector to call the toggleButton() plugin method on the element. See the plugin page for examples.

toggle-switch

Elements: <input type="checkbox"> (from ToggleSwitch)

Indicates that the checkbox shall be replaced by a toggle switch that switches between an active and inactive state with each click. This class has no visible style but is only used in the autostart selector to call the toggleSwitch() plugin method on the element. See the plugin page for examples.

top

Elements: <table>, <td>, <th>, <tr> (from Table)

Vertically aligns the content of a table cell at the top.

Equivalent style: vertical-align: top;

transparent

Elements: <input> (text fields), <select>, <textarea>, <* class="selectable"> (from Form, Selectable)

Makes the background of an input element transparent so that a parent background image shows through.

See also: no-border, underline, selectable

Elements: <button>, <a class="button"> (from Form)

Makes the background of a button transparent. This makes the button very unobtrusive so it can be used for back-out actions like a cancel button that leaves the form without saving changes.

Elements: <div class="message">, <p class="message"> (from Message)

Shows a transparent message box. Only useful for text indenting in combination with an icon, or when closable.

underline

Elements: <input> (text fields), <select>, <textarea> (from Form)

Removes the border of an input element on all sides but the bottom. This creates the simplified style of a paper form that only provides a single line whereon to write. The remaining left and right padding can be removed with the additional no-padding class.

See also: no-padding, no-border, transparent

Elements: <* class="segmented-input"> (from Form)

If the input field within a segmented input has the underline class, it must also be set for the parent segmented input element.

vertical

Elements: <span> (from Typography)

Rotates the text to be vertical from the bottom upwards. This is especially useful for table headers with narrow columns (example).

Elements: <ul class="menu"> (from Menu)

Sets the menu orientation to vertical. See the plugin page for examples.

See also: menu

warning

Elements: <div class="message">, <p class="message"> (from Message)

Shows a warning message box.

Elements: <* class="progressbar"> (from Progressbar)

Changes the bar colour of the progress bar to a warning colour.

white-border

Elements: <img>, <svg> (from Image)

Adds a white border around the image.

wide

Elements: <* class="modal"> (from Modal)

Expands the width of the modal container to the full window.

wrap

Elements: <* class="selectable"> (from Selectable)

Allows the content of a selectable item or its dropdown button to wrap if the text does not fit in the horizontal space.

Frontfire UI CSS classes

Introduction

Documentation

Search

Class names

accordion

active

aside-left

auto-height

auto-select

big

big-links

bordered

both

bottom

button

buttons

carousel

caution

center

circle

clearfix

closable

code

collapsible-column

color-picker

compact

critical

dark

dark-invert

default

double-gap

double-margin

dropdown

error

expanded

fast

field-validation-error

first-column

first-row

flex

form-trap

form-row

form-single-row

full-page

full-page-width

full-width

gallery

group

icon

icon-label

icon-left

icon-only

icon-right

image-center

image-full-width

image-left

image-overlay-text

image-right

image-x2

image-x3

image-x4

indent

indent-checkbox

information

inline

inline-indicator

input-validation-error

invert

justify

label

large

larger

last-column

last-row

left

link

loading

medium

menu