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
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!
This also works well with Tailwind classes like
mb-32 to add vertical margins.
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.
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.