Add spacing helper

[qbixx]

I'm using Bulma for my recent projects. Really like the framework! One feature that would be really helpful is a 'spacing' helper. See e.g. https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.spacings.scss

With this option, you can easily add a padding or margin to specific elements like: .u-margin-top {} .u-padding-left-large {} .u-margin-right-small {} .u-padding {} .u-padding-right-none {} .u-padding-horizontal {} .u-padding-vertical-small {}

Perhaps we can also include the breakpoints into it, like the current 'responsive helpers'. That way we can e.g. set no padding on mobile devices and a top padding on desktops.

If others think this might be a useful addition, I can create a pull request to incorporate this feature.

[ilicmarko]

I have this on my latest project. Here is my code:

$sizes: (0,10,15,20,25,30,50);
$positions: ('top','left','bottom','right');

@each $size in $sizes {
  .u-m-#{$size} {
    margin: $size + px;
  }
  .u-p-#{$size} {
    padding: $size + px;
  }
}

You would use it like this

<div class="m-t-10">This div has top margin 10px</div>

You can add a scaling factor and scale it each size.

[jgthms]

This is an interesting idea but I don't want to bloat Bulma with helpers, as you basically end up designing with HTML, which I'm not a fan of.

[Folyd]

@jgthms Spacing utility is my most like feature in Twitter Bootstrap, do you think the spacing feature would bloat Bulma?

I hope basic-spacing feature would be implemented in Bulma future release.

[furey]

Following @ilicmarko's comment, here's my spacing.scss file…

$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
    ('none', 0),
    ('xxs', 0.125),
    ('xs', 0.25),
    ('sm', 0.5),
    ('md', 1),
    ('lg', 2),
    ('xl', 4),
    ('xxl', 8),
);
$positions: (
    ('t', 'top'),
    ('r', 'right'),
    ('b', 'bottom'),
    ('l', 'left')
);

@function sizeValue($key, $value) {
    @return if($key == 'none', 0, $value + $sizeUnit);
}

@each $size in $sizes {
    $sizeKey: nth($size, 1);
    $sizeValue: nth($size, 2);
    .#{$marginKey}#{$separator}#{$sizeKey} {
        margin: sizeValue($sizeKey, $sizeValue);
    }
    .#{$paddingKey}#{$separator}#{$sizeKey} {
        padding: sizeValue($sizeKey, $sizeValue);
    }
    @each $position in $positions {
        $posKey: nth($position, 1);
        $posValue: nth($position, 2);
        .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
            margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
        .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
            padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
    }
}

…which generates the following classes…

.m-none { margin: 0; }
.p-none { padding: 0; }
.m-t-none { margin-top: 0; }
.p-t-none { padding-top: 0; }
.m-r-none { margin-right: 0; }
.p-r-none { padding-right: 0; }
.m-b-none { margin-bottom: 0; }
.p-b-none { padding-bottom: 0; }
.m-l-none { margin-left: 0; }
.p-l-none { padding-left: 0; }
.m-xxs { margin: 0.125rem; }
.p-xxs { padding: 0.125rem; }
.m-t-xxs { margin-top: 0.125rem; }
.p-t-xxs { padding-top: 0.125rem; }
.m-r-xxs { margin-right: 0.125rem; }
.p-r-xxs { padding-right: 0.125rem; }
.m-b-xxs { margin-bottom: 0.125rem; }
.p-b-xxs { padding-bottom: 0.125rem; }
.m-l-xxs { margin-left: 0.125rem; }
.p-l-xxs { padding-left: 0.125rem; }
.m-xs { margin: 0.25rem; }
.p-xs { padding: 0.25rem; }
.m-t-xs { margin-top: 0.25rem; }
.p-t-xs { padding-top: 0.25rem; }
.m-r-xs { margin-right: 0.25rem; }
.p-r-xs { padding-right: 0.25rem; }
.m-b-xs { margin-bottom: 0.25rem; }
.p-b-xs { padding-bottom: 0.25rem; }
.m-l-xs { margin-left: 0.25rem; }
.p-l-xs { padding-left: 0.25rem; }
.m-sm { margin: 0.5rem; }
.p-sm { padding: 0.5rem; }
.m-t-sm { margin-top: 0.5rem; }
.p-t-sm { padding-top: 0.5rem; }
.m-r-sm { margin-right: 0.5rem; }
.p-r-sm { padding-right: 0.5rem; }
.m-b-sm { margin-bottom: 0.5rem; }
.p-b-sm { padding-bottom: 0.5rem; }
.m-l-sm { margin-left: 0.5rem; }
.p-l-sm { padding-left: 0.5rem; }
.m-md { margin: 1rem; }
.p-md { padding: 1rem; }
.m-t-md { margin-top: 1rem; }
.p-t-md { padding-top: 1rem; }
.m-r-md { margin-right: 1rem; }
.p-r-md { padding-right: 1rem; }
.m-b-md { margin-bottom: 1rem; }
.p-b-md { padding-bottom: 1rem; }
.m-l-md { margin-left: 1rem; }
.p-l-md { padding-left: 1rem; }
.m-lg { margin: 2rem; }
.p-lg { padding: 2rem; }
.m-t-lg { margin-top: 2rem; }
.p-t-lg { padding-top: 2rem; }
.m-r-lg { margin-right: 2rem; }
.p-r-lg { padding-right: 2rem; }
.m-b-lg { margin-bottom: 2rem; }
.p-b-lg { padding-bottom: 2rem; }
.m-l-lg { margin-left: 2rem; }
.p-l-lg { padding-left: 2rem; }
.m-xl { margin: 4rem; }
.p-xl { padding: 4rem; }
.m-t-xl { margin-top: 4rem; }
.p-t-xl { padding-top: 4rem; }
.m-r-xl { margin-right: 4rem; }
.p-r-xl { padding-right: 4rem; }
.m-b-xl { margin-bottom: 4rem; }
.p-b-xl { padding-bottom: 4rem; }
.m-l-xl { margin-left: 4rem; }
.p-l-xl { padding-left: 4rem; }
.m-xxl { margin: 8rem; }
.p-xxl { padding: 8rem; }
.m-t-xxl { margin-top: 8rem; }
.p-t-xxl { padding-top: 8rem; }
.m-r-xxl { margin-right: 8rem; }
.p-r-xxl { padding-right: 8rem; }
.m-b-xxl { margin-bottom: 8rem; }
.p-b-xxl { padding-bottom: 8rem; }
.m-l-xxl { margin-left: 8rem; }
.p-l-xxl { padding-left: 8rem; }

…and is configurable by changing the values of $sizeUnit (rem, em, px), $marginKey ('m', 'marg', 'margin', etc), $paddingKey ('p', 'pad', 'padding', etc), $separator ('-', '_', '' for none, etc) and $sizes (whatever keys/values you need).

👍

[basteyy]

@furey In according to the structure of bulma we should use it like that:

$marginKey: 'has-margin';
$paddingKey: 'has-padding';
$positions: (
                ('top', 'top'),
                ('right', 'right'),
                ('bottom', 'bottom'),
                ('left', 'left')
);

Anyway. Thanks for the snipped :)

[VizuaaLOG]

I think I would be against this. While these helpers are useful sometimes it's not something I feel is essential. Maybe as an extension or something?

In some projects, I have created helpers like 'no-padding-left' etc. But I find if I do change the padding/margin. I just override it in the CSS file. 99% of the time I have a class styling the component to suit the brand and so would change the padding/margin there as well. I don't see the point in having the helpers when you're adding CSS anyway.

When it comes to keeping the code DRY, it's practically impossible in CSS/HTML. You either repeat properties or you repeat class names. Both of which will gzip nicely, and I would rather repeat in the CSS keeping my HTML clean as this is most likely where I will mainly be adding/changing code.

If this was a CSS utility library without the component structure Bulma has, then I would say go ahead.

[ghost]

Maybe @furey it needs:

...
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important;
...
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important;
...

The !important part?

[zymawy]

here is one also

$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // Leave this variable alone

@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

[thom-nic]

Other prior art:

• https://getbootstrap.com/docs/4.0/utilities/spacing/
• https://github.com/mrmrs/css-spacing

Personally I like the selectors from mrmrs/css-spacing: short selectors, REMs and vertical/ horizontal as well as each side. @furey's is close save for lack of both-vertical/ horizontal in on selector e.g. pvxl, mhs etc. Honestly I wouldn't mind pulling in a seperate utility class except I haven't found one in SASS/SCSS that does this well.

Edit: I took @furey's loop as a starting point, tweaked a few variables and added support for all veritical and horizontal to give you .mas, .pvxl, etc. Gist: https://gist.github.com/thom-nic/d873616fb448913e58ce34bd3c24c921

[mohouyizme]

@jgthms I think spacing helpers are very essential, I use them in every bootstrap project, It's the only disappointing thing in Bulma, hope you consider that.

[guillaumek]

@furey thanks for the snippet its great, variable sizes gets in conflict with bulma framework. Best.

[Plinpod]

@furey Thanks for the snippet.

With my setup I changed the $sizes variable to $customSizes because it conflicts with the Bulma sizes variables which is named the same.

I also added this snippet inside the each loop to generate classes for just top and bottom padding/margins.

    .#{$marginKey}#{$separator}#{tb}#{$separator}#{$sizeKey} {
        margin: sizeValue($sizeKey, $sizeValue) 0;
    }

    .#{$paddingKey}#{$separator}#{tb}#{$separator}#{$sizeKey} {
        padding: sizeValue($sizeKey, $sizeValue) 0;
    }

[dagumak]

@jgthms That is a very hypocritical stance to take especially since this WHOLE library is about designing with HTML.

[codeyash]

This strong attitude(thought) is bad for bulma!. Not listening to community is almost main reason of any product dying. You've been warned!

I love this product and I'm missing spacing feature a lot. Hope you will listen us.

[samayo]

I agree, listen to community specially if the request is logical as in this case. I read all the documentation before deciding to search for answer online, because the site I made looks horrible due to spacing issues. I think a pad class is required

[hubbyist]

If a bloatware like spacing helpers is this essential bulma is a wrong framework for you. Use bootstrap instead.

[codeyash]

@hubbyist Really...down voting all comments...

Are you really web developer? I checked your page. It looks you are a backend cum frontend developer.

Bulma is component based. I hope you're aware of that. User can easily pick what's required and actually they should use custom build for production.

Got it?

[hubbyist]

Each official component add a maintenance cost on a framework and spacing helpers are a way of adding exceptions to any general layout thus defeating the purpose of a css framework, so I do not think they deserve that much attention.

[picosam]

@hubbyist what would you suggest as an alternative to adding spacing to the framework? Would you rather one create one's own margin/padding classes and add media queries to set spacing throughout the project?

[hubbyist]

I just do not see a meaning full difference between <section style="padding-left: 0"></section> and <section class="padding-left-zero"></section>.

[picosam]

Aren't inline styles considered bad practice and of relatively worse performance compared to CSS classes?

[hubbyist]

If there is a single property in a global css class it is part of the "site content" rather than "layout and design" in my opinion. So must be inside the data not in css classes to be cleaned in later code and content iterations. Or stay inline forever for content to be portable if this is an integral part of the meaning.

[picosam]

Well, spacing in a typical website would be all over the place really, and not a single occurrence, so I disagree; but that's alright, I just wanted to know your opinion. Thank you 🙂

[samayo]

I am changing my stance on this. I am in favor of keeping bulma bloat-free so i agree with the author

[augnustin]

Joining the hot discussion, here are some thoughts.

As @hubbyist I also find that writing <div class="m-t-2"></div> is not the right way to write components as this is 0% reusable.

I'm surprised Bootstrap added it, I have been using v3.x for quite some time and as far as I know it wasn't there.

The only thing I was missing then, was horizontal spacing, to isolate sections. I ended up writing <hr class="invisible" />. This was not perfect since it was extra html, but somehow this could be considered semantically correct, since it was to isolate sections between each other, which <hr /> are for, and this one happened to be styled transparent.

Anyway, Bulma has <div class="section"></div> which does this. One can play with variable if it is too big or too small.

But IMHO, for any other case, the rule must be styled at the component level, within (S)CSS. Yes it is a pain, but this is because it is an exception from the original component, and going away from the framework's component is more work, one needs to be aware of this. Either buy the standard, or pay more.

Eventually in prototyping situations, where cleanliness comes after speed, class="m-t-1" could make sense, but then copy-paste @furey's above code in a specific file, and start it with the following comment: // TODO: remove this file as soon as no longer necessary as this produces cheap, unresponsive, unDRY code. This has nothing to do in the core framework.

As a final word, I'd say that there might be specific situations where spacing is not correctly handled by the framework. Then, one should create an issue regarding this specific situation, and eventually there will be a fix or a utility for this case, but that's it.

Thanks for reading, I am very opened to critics. :smile:

[thom-nic]

So, obv littering your markup with <div class='m-t-2'> is lazy. This is how I use spacing helpers:

.myRowButton       // hypothetical, yes there are other ways to do this.
  @extend .m-r-xs, .button
  &:last-child
    @extend .m-r-z  // this is, arguably, the least-useful of all spacing helpers, but still.
.saveBtnInline
  @extend .myRowBtn, .success
.cancelBtnInline
  @extend .myRowBtn, .warning

section
  &.main   
     @extends .m-v-l
  &.news
     @extends .m-v-m, .p-a-m

As with most "helpers" the best way is to extend them with into own style definitions. And as your site grows, if you want to tweak spacing/ padding, it's as easy as tweaking the the helper variable. Or at least changing some -ls to -ms.

The problems you're solving is down the road you don't have to grep for margin.*px, dealing with not consistent use of px vs em vs rem or .2rem here but oops .3rem there.

Edit: I'll add that at this point, I don't care about this particular issue since it seems apparent it's not going anywhere. I'm using the helper I posted in my previous comment and moved on from this.

[nielspeen]

In my experience most devs will already have their own collection of homebrew/borrowed framework-independent helpers that they prefer to use in all their projects.

That's not an argument against adding some of them to Bulma, but given the author's limited time I would rather see him focus on Bulma's core components.

[vctrtvfrrr]

I create a gist based on @furey's code including margin auto: https://gist.github.com/VictorOtavio/e0576b755a49ef3682354091c6911dcb

[frederikhors]

@VictorOtavio what do you think about creating a Github project with this?

[wrabit]

If a spacing system was introduced, it should be as versatile and useful as Bootstrap's which incorporates responsive breakpoints - Bulma's version could reference mobile, desktop, widescreen:

.mb-is-mobile-1 (margin-bottom: 0.5 rem) .mb-is-mobile-2 (margin-bottom: 0.75 rem) .mb-is-mobile-3 (margin-bottom: 1 rem) ...

.mb-is-tablet-1 (margin-bottom: 0.5 rem) .mb-is-tablet-2 (margin-bottom: 0.75 rem) .mb-is-tablet-3 (margin-bottom: 1 rem) ...

etc.

[gizmostudios]

I include the following helper code in my styles

// Spacing helpers
@each $size in [0,1,2,3,4,5] {
  @each $pos in ['top','right','bottom','left'] {
    .margin-#{$pos}-#{$size} {
      margin-#{$pos}: $size + rem
    }
    .padding-#{$pos}-#{$size} {
      padding-#{$pos}: $size + rem
    }
  }
}

after which I can add rules like the following to space out elements:

// Add 1rem vertical space between buttons
.button + .button {
   @extend .margin-top-1;
}

I agree that adding spacers in your markup makes it look very messy fast and is also in my opinion an anti-pattern. Space is between elements, and shouldn't be directly assigned to one of them without regard of their siblings.

[wrabit]

I've put together a modified version from Bootstrap which incorporates the .tablet, .desktop etc. breakpoints: ( I added a mobile breakpoint - personal preference )

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
), $spacers);

$grid-breakpoints: (
  xs: 0,
  mobile: 576px,
  tablet: $tablet,
  desktop: $desktop,
  widescreen: $widescreen,
  hd: $fullhd
) !default;

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {

        .is-#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .is-#{$abbrev}t#{$infix}-#{$size},
        .is-#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .is-#{$abbrev}r#{$infix}-#{$size},
        .is-#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .is-#{$abbrev}b#{$infix}-#{$size},
        .is-#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .is-#{$abbrev}l#{$infix}-#{$size},
        .is-#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Some special margin utils
    .is-m#{$infix}-auto { margin: auto !important; }
    .is-mt#{$infix}-auto,
    .is-my#{$infix}-auto {
      margin-top: auto !important;
    }
    .is-mr#{$infix}-auto,
    .is-mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .is-mb#{$infix}-auto,
    .is-my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .is-ml#{$infix}-auto,
    .is-mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

https://gist.github.com/wrabit/47767c82a7b62f4fe0d931b94a9b489b

[gragland]

@jgthms Has your thinking on adding spacing helpers changed at all? Being able to have a consistent spacing scale that I can apply just by adding classnames like mt-tablet-3 would be a huge productivity win for me.

[jrnxf]

I love Bulma as much as the next person, but I'm not gonna lie, not having these is pretty disappointing.

[wrabit]

Moving from bootstrap to bulma, without this and a whole lot of other responsive helpers, my productivity slowed. Of course we could write these rules out but its tedious and think the overhead of having such helpers natively included is worth it. Im copying the scss rules from bootstrap for display, text align, float and spacing, checkout my gist for spacing.

[alensiljak]

@williamabbott, I'm quite interested to know why people move from Bootstrap to Bulma, yet still expecting to have everything from Bootstrap available. The question simply comes forward - why not stay with Bootstrap? I don't have a specific opinion on this but certainly dislike having a trillion different spacing options. I'm working on an application which is now 100% non-reusable simply due to dozen different ways developers used spacing to lay out controls on the page using Bootstrap helpers. I really see no difference in writing style elements to move things around, compared to that. But, as I've said, I have no specific opinion and would prefer someone who's been studying UX a bit harder to come up with some conventions. I also think that adding a separate scss file with modifiers (as demonstrated several times above) is a great solution as it is specific to each project and/or section.

[wrabit]

@MisterY I wasn't aware this was a trend that people are expecting everything from BS to be here? My case might differ slightly as I am mainly talking about 'responsive' spacer / helpers. I use them in BS to build optimal layouts across all devices, without even thinking too hard about it. This is a valuable time saver for me and honestly think, for someone who already covers a wide area of the stack, this little feature goes a long way. Is it really too hard to imagine why people move? Joining a new team, contributing to multiple projects and in my case using Buefy Vuejs component library because I needed their components, but it used Bulma. Individuals arrive from their own journey of using x, y, z tools that they become efficient using, of course if they find value in them, they're going to want them everywhere they go.

[gragland]

This Bulma helpers project looks pretty good: https://github.com/jmaczan/bulma-helpers

I'd love to see helpers become an official part of Bulma, but barring that, maybe the next best thing is we rally behind this project and help improve it (although it seems pretty complete).

[Nothing-Works]

really hope utility classes can be added lol

[marqpdx]

This Bulma helpers project is working very well for me. I've only used it for <section class="has-margin-top-15">... but that's awesome right there. I agree with someone above that it's very nice to stick to the patterns of the bulma naming conventions, and one can rest assured that has-padding-right-20 will add 20px padding to the right.

Have a look and see if this is worth our collective investments of time and thought.

https://github.com/jmaczan/bulma-helpers

[marcosandri-dev]

Helpers on margin and padding are especially useful when they can be mixed with responsiveness, like "is-tablet mleft-4" for example; But since developers thoughts are really closed about this, I suggest people to go back on Bootstrap for the next project, as someone else suggested and as I did. Don't pick the wrong framework just to try something different, if the one you're using is good anyways. Good luck.

[Threebow]

What is the difference between spacing helpers and the already included typography size helpers (is-size-1..7)? Don't both fundamentally make you design with HTML instead of CSS? If so, why do we have one and not the other?

[andreimoment]

@marqpdx the bulma-helpers minified css is 313kb.

[AJHanekom]

**On second thought - I've read some opinions - I get it now.

[sbefort]

Here is an alternative version that includes Bootstrap responsive classes like mt-lg-3, mx-xl-1, etc.

https://www.sassmeister.com/gist/11d8724693331b957089b3e342f45f49 https://gist.github.com/sbefort/11d8724693331b957089b3e342f45f49

[AJHanekom]

Thanks Shaun - this will be really helpful!

On Mon, Apr 8, 2019 at 7:34 AM Shaun Befort notifications@github.com wrote:

Here is an alternative version that includes Bootstrap responsive classes like mt-lg-3, mx-xl-1, etc.

https://www.sassmeister.com/gist/11d8724693331b957089b3e342f45f49 https://gist.github.com/sbefort/11d8724693331b957089b3e342f45f49

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jgthms/bulma/issues/451#issuecomment-480689667, or mute the thread https://github.com/notifications/unsubscribe-auth/AIZAlpktfWiR6aS39mUxQY1do7xEKWEAks5vetTLgaJpZM4Leqso .

[andreimoment]

Thank you @sbefort

[truongnmt]

My version:

$sizes: (0,10,15,20,25,30,50);
$positions: ('top','left','bottom','right');

@each $size in $sizes {
  @each $position in $positions {
    .m#{str-slice($position, 0, 1)}-#{$size} {
      margin-#{$position}: $size + px;
    }
    .p#{str-slice($position, 0, 1)}-#{$size} {
      padding-#{$position}: $size + px;
    }
  }
}

Then you could use it like this:

<div class="mt-10">This div has top margin 10px</div>

[jaredcwhite]

I really liked @truongnmt 's simple solution, but I wanted to have something similar to Tailwindcss since I'm using that on a different project, so I modified their example slightly and added a couple extras (negative margins, margin auto):

/* Add Tailwindcss-ish margin and padding helpers */

$sizes: 
  0 0,
  1 0.25,
  2 0.5,
  3 0.75,
  4 1,
  5 1.25,
  6 1.5,
  8 2,
  10 2.5,
  12 3,
  16 4,
  20 5,
  24 6,
  32 8,
  40 10,
  48 12,
  56 14,
  64 16;
$positions: ('top','left','bottom','right');

@each $index, $size in $sizes {
  @each $position in $positions {
    .m#{str-slice($position, 0, 1)}-#{$index} {
      margin-#{$position}: $size + rem;
    }
    .p#{str-slice($position, 0, 1)}-#{$index} {
      padding-#{$position}: $size + rem;
    }
    .-m#{str-slice($position, 0, 1)}-#{$index} {
      margin-#{$position}: -$size + rem;
    }
  }
}

.m-auto {
  margin: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

[dbrgn]

A few thoughts. I came here because I needed to add vertical spacing between sections of a complex form.

First of all, quotes like this:

This strong attitude(thought) is bad for bulma!. Not listening to community is almost main reason of any product dying. You've been warned!

...are highly disrespectful. Comments like these are the reason why open source maintainers are fed up with their projects and overly demanding (non-paying) user base. If a project starts adding everything that the community demands, it usually ends up as a bloated collection of incoherent components. I'm not saying that spacing helpers are such a thing, but it is the project leaders' decision what they want to integrate into the core and what they don't want. If they think it doesn't fit in the core, then add it to projects like "bulma-helpers" or the "helpers" directory of your own project.

In my experience, good open source projects stay good over the years due to the features they reject, not due to the features they add.

Now to the spacing itself: If we start adding classes like "mt-10" for 10 px top margin, then where is the difference to setting style="margin-top: 10px;"? If there should be a set of spacing helpers, it should be abstract, so that it can be adjusted and scaled depending on the project and the responsive environment. A system with indicators like "space-top-(s|m|l|xl)" or a number based system similar to the "is-size-(1..7)" is much more useful. I want to influence the vertical "rhythm" of my page elements, but I want that rhythm to feel consistent on all pages. Absolute pixel sizes in class names do not achieve that goal.

But in the end, if I want to style sections of my page in a consistent style specific to my page, then that's exactly what classes + CSS are made for. There's nothing bad about adding class="form-section" to my form sections and then adding a .form-section { ... } block in my project CSS file.

Or - of course - you can include one of the many already existing spacing helpers. They're one include away.