Spacing

Overview #

In the MIZ framework, spacing (Padding and Margin) is managed using predefined classes. These classes allow you to easily adjust the internal (Padding) and external (Margin) spacing of elements. Additionally, you can customize these classes to set your desired values and units.

Basic Spacing Classes #

Padding

Padding classes are identified with the prefix p and allow you to set the internal spacing of elements. For example:

• p-1: Sets padding to 1.
• px-3: Sets horizontal padding (left and right) to 3.
• py-lg-5: Sets vertical padding (top and bottom) to 5 on large screens.
• p-xl-1: Sets padding to 1 on extra-large screens.
• pr-3: Sets right padding to 3.
• pt-1: Sets top padding to 1.

Margin

Margin classes are identified with the prefix m and allow you to set the external spacing of elements. For example:

• mb-1: Sets bottom margin to 1.
• m-sm-2: Sets margin to 2 on small screens.
• mx-lg-5: Sets horizontal margin (left and right) to 5 on large screens.

Gap

Gap classes are identified with the prefix gap and are used to set the spacing between elements in Flexbox and Grid containers. For example:

• gap-1: Sets gap to 1.
• gap-lg-2: Sets gap to 2 on large screens.
• gap-sm-4: Sets gap to 4 on small screens.

How to Use #

To use these classes, simply add them to your desired element. For example:

                    

                    
HTML

                    <div class="bg-primary-color p-6 radius-all-small"></div>
                

                    

                    
HTML

                    <div class="bg-primary-color w-100 py-3 radius-all-small d-flex flex-row justify-content-start align-items-start">
    <span class="bg-on-primary-color radius-all-small txt-center p-2 ml-1">Lorem</span>
    <span class="bg-on-primary-color radius-all-small txt-center p-2 ml-2">Lorem</span>
    <span class="bg-on-primary-color radius-all-small txt-center p-2 ml-3">Lorem</span>
    <span class="bg-on-primary-color radius-all-small txt-center p-2 ml-4">Lorem</span>
    <span class="bg-on-primary-color radius-all-small txt-center p-2 mx-1">Lorem</span>
</div>
                

Custom Settings #

All spacing classes are customizable. For example, you can customize the padding settings in miz/sass/config/_responsive.scss

                    
HTML

                    $conf-paddings: (
    count: 10,
    unit: rem,
    factor: 0.5,
    responsive: true
);
                

In these settings:

• count: Number of classes created for Padding.
• unit: Measurement unit (e.g., rem, px, em).
• factor: Factor for determining the Padding value.
• responsive: Settings related to support for different screen sizes.

Key Points #

• High Flexibility: With these classes, you can easily adjust the internal and external spacing of elements.
• Ease of Use: MIZ's ready-to-use classes make the use of Padding and Margin very simple.
• Customization: With custom settings, you can adjust the classes to your liking and set your desired values and units.