Spacing

In this section, we are going to give you an overview of how Milestone Systems web application spacing are defined.

Table of contents

Overview

Milestone Systems web systems spacing are globally defined on bootstrap definitions as described in the global spacing definitions below. Concerning global spacing definitions, you will need to install boostrap 4 or above.

Besides these global spacing definitions, there is also section spacing which is not based on bootstrap and has its own definitions.

Global spacing definitions

The global spacing definitions, which represents margin and padding, are based on bootstrap 4 margin and padding utilities classes definitions.

All definitions follow bootstrap breakpoints abbreviations except xs. The remaining breakpoints will include a breakpoint abbreviation and they are defined as follow:

The CSS utilities classes are named using the following formats

• For xs, it will defined as such {type}{orientations}-{size}
• For the rest, sm, md, lg, and xl, it will defined as such {type}{orientations}-{breakpoint}-{size}

The type is defined as follow:

• "m" for classes that set margin
• "p" for classes that set padding

The orientations are defined as follow:

• "t" will set margin-top or padding-top
• "b" will set margin-bottom or padding-bottom
• "l" will set margin-left or padding-left
• "r" will set margin-right or padding-right
• "x" will set both *-left and *-right
• "y" will set both *-top and *-bottom
• "blank" will set margin or padding on all 4 orientations of the specified element

The size is defined as follow:

• "auto" will set the margin to auto
• "0" will remove any margin or padding by setting it to 0
• "1" will set margin or padding to 4px
• "2" will set the margin or padding to 8px
• "3" will set the margin or padding to 12px
• "4" will set the margin or padding to 16px
• "5" will set the margin or padding to 20px
• "6" will set the margin or padding to 24px
• "7" will set the margin or padding to 32px
• "8" will set the margin or padding to 40px
• "9" will set the margin or padding to 48px
• "10" will set the margin or padding to 64px
• "11" will set the margin or padding to 80px
• "12" will set the margin or padding to 96px
• "13" will set the margin or padding to 112px
• "14" will set the margin or padding to 128px
• "15" will set the margin or padding to 160px

Note: For more information about bootstrap margin and padding definitions, please go to bootstrap spacing page here.

Section Spacing Definitions

The section spacing is not based on Bootstrap 4 spacing definitions. it has its own and is devided in 3, Large, Medium and Small definitions. For each of them, there will be a specific padding definition for desktop, tablet and mobile devices.

Basically, the section spacing consists of 3 distinct CSS classes definitions:

• msds-block-padding-large
• msds-block-padding-medium
• msds-block-padding-small

For each of the following section, The blue areas represent the section spacing and based on the CSS class used will adapt to device automatically.

Also, remember that

• Desktop represents screens superior or equivalent than 992px.
• Tablets represents screens superior or equivalent than 769px and inferior than 992px.
• Mobile represents screens inferior than 769px.

Large Spacing Definitions

Below is the “Large” definitions for sections where the section is using the “msds-block-padding-large” CSS class.

Try out the "Large" section spacing implementation by resizing the client window or any repsonsive/developer tools to select the different screen sizes.

<div class="msds-bg-clear-blue">    
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="msds-block-padding-large msds-text-white">
                    <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
                    <div class="msds-text-body-1">
                        Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
                    </div>                
                </div>
            </div>
        </div>        
    </div>      
</div>

Medium Spacing Definitions

Below is the “Medium” definitions for sections where the section is using the “msds-block-padding-medium” CSS class.

Try out the "Medium" section spacing implementation by resizing the client window or any repsonsive/developer tools to select the different screen sizes.

<div class="msds-bg-clear-blue">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="msds-block-padding-medium msds-text-white">
                    <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
                    <div class="msds-text-body-1">
                        Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Small Spacing Definitions

Below is the “Small” definitions for sections where the section is using the “msds-block-padding-small” CSS class.

Try out the "Small" section spacing implementation by resizing the client window or any repsonsive/developer tools to select the different screen sizes.

<div class="msds-bg-clear-blue">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="msds-block-padding-small msds-text-white">
                    <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
                    <div class="msds-text-body-1">
                        Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>