Cacher is the code snippet organizer for pro developers

<!-- BS võimaldab anda elemendile margini ja paddingu otse klassis  -->

###PROPERTY
m - for classes that set margin
p - for classes that set padding

###SIDES
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

###SIZE
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer-x * .25 or $spacer-y * .25
2 - (by default) for classes that set the margin or padding to $spacer-x * .5 or $spacer-y * .5
3 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
4 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
5 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

        <!-- MB MARGIN BOTTOM -->
        <!-- pole marginit all-->
        <h1 class="mb-0 bg-success">Margin Bottom 0</h1>
        <h1 class="mb-1 bg-success">Margin Bottom 1</h1>
        <!-- mb-2 on vaikimisi valik marginiks-->
        <h1 class="mb-2 bg-success">Margin Bottom 2</h1>
        <h1 class="mb-3 bg-success">Margin Bottom 3</h1>
        <h1 class="mb-4 bg-success">Margin Bottom 4</h1>
        <h1 class="mb-5 bg-success">Margin Bottom 5</h1>

        <br>
        <br>

        <!-- MT MARGIN TOP -->
        <!-- margin üleval -->
        <h1 class="mt-0 bg-success">Margin Top 0</h1>
        <h1 class="mt-1 bg-success">Margin Top 1</h1>
        <h1 class="mt-2 bg-success">Margin Top 2</h1>
        <h1 class="mt-3 bg-success">Margin Top 3</h1>
        <h1 class="mt-4 bg-success">Margin Top 4</h1>
        <h1 class="mt-5 bg-success">Margin Top 5</h1>

        <br>
        <br>

        <!-- ML & MR -->
        <p>
            <span class="mr-5 bg-success">Margin Right 5</span> dolor sit amet,
            <span class="ml-3 bg-success">Margin Left 3 </span> elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- MX MARGIN LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="mx-5 bg-success">Margin Left & Right 5</span>, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- MY  MARGIN TOP BOTTOM -->
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>
        <p class="my-5 bg-success">Margin Top & Bottom 5</p>
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- BLANK - ALL SIDES -->
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>
        <p class="m-5 bg-success">Margin All Sides 5</p>
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- PB PADDING BOTTOM -->
        <!-- Paddingu lisamine toimib samal põhimõttel mis margini lisamine -->
        <h1 class="bg-warning">Padding Bottom 0</h1>
        <h1 class="bg-warning">Padding Bottom 1</h1>
        <h1 class="bg-warning">Padding Bottom 2</h1>
        <h1 class="bg-warning">Padding Bottom 3</h1>
        <h1 class="bg-warning">Padding Bottom 4</h1>
        <h1 class="bg-warning">Padding Bottom 5</h1>

        <br>
        <br>

        <!-- PT PADDING TOP -->
        <h1 class="bg-warning">Padding Top 0</h1>
        <h1 class="bg-warning">Padding Top 1</h1>
        <h1 class="bg-warning">Padding Top 2</h1>
        <h1 class="bg-warning">Padding Top 3</h1>
        <h1 class="bg-warning">Padding Top 4</h1>
        <h1 class="bg-warning">Padding Top 5</h1>

        <br>
        <br>

        <!-- PL & PR -->
        <p>
            <span class="bg-warning">Padding Right 5</span> dolor sit amet,
            <span class="bg-warning">Padding Left 3 </span> elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- PX PADDING LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="bg-warning">Padding Left & Right 5</span>, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- PY  PADDING TOP BOTTOM -->
        <p class="bg-warning">Padding Top & Bottom 5</p>

        <br>
        <br>

        <!-- ALL SIDES -->
        <p class="bg-warning">Padding All Sides 5</p>

        <!-- HORIZONTAL CENTERING -->
        <div class="mx-auto bg-info" style="width: 200px;">
            Horizontal Centering
        </div>