Spacing

In most layouts, a common spacing is used to separate individuals elements from each other.

Boxes allows you to define custom spacing scales that are then displayed in the Boxes editor.

If a spacing is selected for a Box, a pre-defined CSS class will be added to the Box's markup. You can then style this class to add your margins.

Defining the scale

A spacing consists of a human-readable label, a group and a class which will be added to your Box's markup.

All available spacings are defined in the config.php. There are separate classes defined for before and after spacings. You can override the default config by creating a config/offline/boxes/config.php and return your own values.

The default spacing config looks like this:

return [
    'spacing' => [

        'before' => [
            'none' => [
                'label' => 'None',
                'class' => '',
                'group' => 'general',
            ],
            'small' => [
                'label' => 'Small',
                'class' => 'oc-boxes-spacing--before-small',
                'group' => 'general',
            ],
            'medium' => [
                'label' => 'Small',
                'class' => 'oc-boxes-spacing--before-medium',
                'group' => 'general',
            ],
            // ...
        ],

        'after' => [
            'none' => [
                'label' => 'None',
                'class' => '',
                'group' => 'general',
            ],
            'small' => [
                'label' => 'Small',
                'class' => 'oc-boxes-spacing--after-small',
                'group' => 'general',
            ],
            // ...
        ],
    ],
];

Enable the spacing selector for a Box

By adding a spacing key to a Box config, a spacing selector will be displayed to the user in the Boxes editor.

You have to define which spacing groups are available for a given Box in your Box config:

name: Partial with spacing
spacing:
- general
- another_special_group

In this example, if the user selects the before medium spacing, a oc-boxes-spacing--medium-before class will be added to the rendered Box.

It is your responsibility to add CSS styles for these classes!

TIP

This also works well with Tailwind classes like mt-32 or mb-32 to add vertical margins.

TIP

The spacing selector will be added to a separate tab in the Boxes editor. It is advised that your form uses tabs as well for a better form layout.

TIP

It is advised to use margin instead of padding to add the spacing between your elements since margins collapse into each other. This way you don't end up with duplicate spacing between elements.