CSS Properties

CSS Properties

Use Monster's custom CSS properties for fast and forward-thinking design.

The Monster form uses many custom CSS properties (variables) for real-time customizations. These provide easy access to commonly used values like our theme colors or primary font stacks when working in your browser's inspector, in a code sandbox, or in general prototyping.

To avoid conflicts with third-party CSS, all custom properties are prefixed with monster-.

Here are the variables we include (note that the :root is required) that can be accessed anywhere Monster Form's CSS is loaded.

:root {
    --monster-border-color: #ff7;
}

Utilities

With the following script, you can see the list of all the CSS properties that are available in the Monster UI Framework.

ag  -o --nofilename 'var\(\-\-monster[^)]*\)' | grep var | cut -d"," -f1 | cut -d")" -f1 | cut -d" " -f1 | cut -d"(" -f2- | sort | uniq 

Actually, the following CSS properties are in use (incomplete list):

--monster-accent-color
--monster-bg-color
--monster-border-color
--monster-border-radius
--monster-border-width
--monster-btn-bg-color
--monster-btn-border-color
--monster-btn-color
--monster-color-activity
--monster-color-failed
--monster-color-successful
--monster-disabled-background-color
--monster-disabled-border-color
--monster-disabled-color
--monster-font-family
--monster-hover-color
--monster-message-bg-color
--monster-message-border-color
--monster-message-border-radius
--monster-message-border-style
--monster-message-border-width
--monster-message-color
--monster-message-margin-bottom
--monster-message-margin-left
--monster-message-margin-right
--monster-message-margin-top
--monster-message-padding-bottom
--monster-message-padding-left
--monster-message-padding-right
--monster-message-padding-top
--monster-notify-duration
--monster-popper-witharrrow-distance
--monster-selected-color