bulma-dev-spacing

Info

Bootstrap spacing style helpers for Bulma.

There are five sizes (-1|2|3|3|5).

I've created it for my Bulma Builder

Usage

<div class="has-margin-1">
    Margin on all resolutions
</div>

<div class="has-margin-tablet-1">
    Margin on tablets and up
</div>

<div class="has-padding-x-desktop-5">
    Horizontal padding on desktops and up
</div>

<div class="has-margin-x-auto">
    Horizontal centering
</div>

Margin classes

{NUMBER} is a number between 1 and 5.

{DEVICE} is one of tablet|desktop|widescreen|fullhd

• .has-margin-{NUMBER}

• .has-margin-x-{NUMBER}

• .has-margin-y-{NUMBER}

• .has-margin-top-{NUMBER}

• .has-margin-right-{NUMBER}

• .has-margin-bottom-{NUMBER}

• .has-margin-left-{NUMBER}

• .has-margin-{DEVICE}-{NUMBER}

• .has-margin-x-{DEVICE}-{NUMBER}

• .has-margin-y-{DEVICE}-{NUMBER}

• .has-margin-top-{DEVICE}-{NUMBER}

• .has-margin-right-{DEVICE}-{NUMBER}

• .has-margin-bottom-{DEVICE}-{NUMBER}

• .has-margin-left-{DEVICE}-{NUMBER}

Padding classes

{NUMBER} is a number between 1 and 5.

{DEVICE} is one of tablet|desktop|widescreen|fullhd

• .has-padding-{NUMBER}

• .has-padding-x-{NUMBER}

• .has-padding-y-{NUMBER}

• .has-padding-top-{NUMBER}

• .has-padding-right-{NUMBER}

• .has-padding-bottom-{NUMBER}

• .has-padding-left-{NUMBER}

• .has-padding-{DEVICE}-{NUMBER}

• .has-padding-x-{DEVICE}-{NUMBER}

• .has-padding-y-{DEVICE}-{NUMBER}

• .has-padding-top-{DEVICE}-{NUMBER}

• .has-padding-right-{DEVICE}-{NUMBER}

• .has-padding-bottom-{DEVICE}-{NUMBER}

• .has-padding-left-{DEVICE}-{NUMBER}