Helpers

Helpers are modifiers that can be applied to any HTML element to change their style.

Disable helpers

Individual helpers can be disabled providing an object in the modules field of your configuration with the name of the helper setted to false:

export default {
    modules: {
        textColor: false,
        margin: false,
        padding: false,
    },
    // ...other configuration
};

Usage

Helpers modifiers have the following class pattern:

.has-<shortcut>-<name>
.is-<name>

Some helpers modifiers, like colors and sizes, always use the .has-<shortcut>-<name> pattern. In this case,

• shortcut is the CSS attribute. For example we will use bg for the background-color and w for the width.
• name is the CSS value to apply. For example full usually will apply a 100% value.

Example:

<button class="button has-w-full has-bg-primary has-text-center">
    Example button
</button>

Other simple helpers modifiers will use the .is-<name> pattern. Example:

<span class="is-capitalized">Hello world!</span>

Themeable helpers

There are some helpers that are generated using the theme defined in your configuration file. For example, if you customize the primary color in your theme, the has-bg-primary helper will use the color that you have specified in your theme instead of the default color of the siimple theme.

Also, additional colors provided in the colors scale will generate an additional helpers. For example, the following configuration:

export default {
    colors: {
        info: "#1991a9",
        success: "#299956",
        warning: "#fbc850",
        error: "#e23636",
        // ...other default colors
    },
    // ...other configuration
};

Will generate the following additional helpers:

.has-bg-info {background-color: #1991a9;}
.has-bg-success {background-color: #299956;}
.has-bg-warning {background-color: #fbc850;}
.has-bg-error {background-color: #e23636;}