1. General Utilities & Helpers

Class Purpose / Description
.clearfix Clears floated child elements within a parent container using the pseudo-element ::after.
.hide-by-clipping An accessible screen-reader-only utility that visually hides content via clipping without breaking accessibility.
.prevent-scroll Applied to <body> to lock scrolling (e.g., when a modal, overlay, or mobile menu is active).

2. Editor Core Containers & Layout (.fr-box, .fr-wrapper, .fr-element)

Class Purpose / Description
.fr-box The main wrapper element encircling the entire Froala editor instance.
.fr-element The actual editable area (Rich Text input area where users type).
.fr-wrapper The inner container holding the editable area and placeholders.
.fr-placeholder Placeholder text rendered inside the editor when the text area is empty.
.fr-basic Applies standard box-shadow and padding styles to a basic-mode editor instance.
.fr-top Applied when the toolbar is anchored at the top of the editor.
.fr-bottom Applied when the toolbar is anchored at the bottom of the editor.
.fr-iframe Formats an <iframe> rendered inside the editor to take full width and strip borders.
.show-placeholder Modifier class on .fr-wrapper that triggers the visibility of .fr-placeholder.
.fr-disabled Disables interaction and user text selection on the editor or specific controls.
.fr-rtl Sets Right-To-Left text alignment and UI orientation.
.fr-sr-only Screen-reader-only class used internally for button labels.

3. Toolbars & Controls (.fr-toolbar, .fr-command, .fr-btn)

Class Purpose / Description
.fr-toolbar The toolbar component containing formatting buttons, selectors, and dropdowns.
.fr-command Base class applied to interactive elements/buttons within the toolbar or popups.
.fr-btn Specific styling for standard toolbar buttons (38x38px trigger targets).
.fr-btn-text Extends a toolbar button to allow auto-width when displaying text alongside icons.
.fr-floating-btn Circular floating action button (e.g., quick insertion controls).
.fr-active Marks a button or menu item as currently selected/active.
.fr-selected Applies highlighting to hovered/selected command options in desktop view.
.fr-hidden Hides toolbar buttons or elements (display: none).
.fr-inline Formats the toolbar for inline pop-up mode instead of sticky/fixed layout.
.fr-mobile Target modifier applying touch-optimized styles for mobile devices.
.fr-desktop Target modifier applying desktop-specific hover and interaction styles.
.fr-blink Mobile utility class handling button tap/highlight feedback.
.fr-separator Divider element separating button groups in the toolbar (.fr-vs vertical, .fr-hs horizontal).

4. Dropdowns, Menus & Tooltips (.fr-dropdown, .fr-popup, .fr-tooltip)

Class Purpose / Description
.fr-dropdown Applied to buttons that expand a sub-menu (includes down-arrow styling via ::after).
.fr-dropdown-menu The container holding expandable menu options when a dropdown button is active.
.fr-dropdown-wrapper Inner scroll wrapper for dropdown menus with expanding transition effects.
.fr-dropdown-content Content host inside dropdowns with a max-height limit (275px).
.fr-dropdown-list Unordered list styling within dropdown menus.
.fr-tooltip Hover tooltip bubble displaying command hints.
.fr-popup Floating popup box used for insertion tools (e.g., links, images, tables).
.fr-above Flips popups or toolbars to anchor above the target instead of below it.
.fr-arrow Triangular directional arrow indicator pointing toward the target element for popups.

5. Forms, Inputs & Dialogs (.fr-modal, .fr-layer, etc.)

Class Purpose / Description
.fr-modal Full-screen fixed modal overlay dialog container.
.fr-modal-wrapper The central pop-up box inner container inside a modal.
.fr-modal-head Header area for the modal containing title and close icon.
.fr-modal-close Styling for the modal's close button in the top-right corner.
.fr-modal-body Scrollable body section of the modal container.
.fr-overlay Dark semi-transparent backdrop behind active modals.
.fr-layer Panel layout inside popups hosting specific functional UI forms.
.fr-text-edit-layer Specialized form layer optimized for text editing inputs (250px width).
.fr-input-line Form field wrapper supporting animated floating-label inputs.
.fr-input-focus State modifier indicating an active focused text input field.
.fr-not-empty Class added via JS when an input has text, keeping the label active above it.
.fr-action-buttons Container for action buttons (e.g., "Cancel", "Insert") at the bottom of a popup.
.fr-checkbox / .fr-checkbox-line Custom checkbox UI and wrapper row styling.

6. Plugins & State Helpers

Class Purpose / Description
.fr-counter Character Counter: Display badge anchored at the bottom-right showing character/word count.
.fr-code-view Applied when switching the editor into raw HTML viewing mode.
.fr-drag-helper Drag-and-Drop: Visual guide line indicating drop placement when dragging elements.
.fr-dragging Applied to elements actively being dragged (lowers opacity to 40%).
.fr-fullscreen Fullscreen Plugin: Scales the body and editor wrapper to occupy 100% of the viewport.
.fr-line-breaker Line Breaker Plugin: Interactive blue separator line with a floating + button allowing users to break lines between non-editable elements (like tables or videos).
.fr-video Video Plugin: Wrapper for embedded video content in the editor area.
.fr-video-resizer Video Plugin: Resizing bounding-box frame with drag handles (.fr-handler) for adjusting video dimensions (.fr-hnw, .fr-hne, .fr-hsw, .fr-hse for top-left, top-right, bottom-left, bottom-right).
.fr-sticky / .fr-sticky-on Controls sticky position behavior of toolbars during vertical scrolling (.fr-sticky-dummy acts as a space keeper).
.fr-visible / .fr-opacity-0 Visibility and opacity state modifiers.
.fr-visibility-helper Responsive helper using responsive media queries to detect viewport sizes via JS.