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.

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.