[Feature Request] - Add cell padding utility classes to parent elements

[ggedde]

This is separate from the already existing spacing utilities. I would like to request a Utility for adding a class to parent elements that pad the child elements accordingly. Like cellpadding for tables.

A simple concept would be to use pad-0 pad-1 pad-2 pad-3 pad-4 pad-5 Also include padx- and pady- These classes should just add a margin to the inner elements and a negative from the parent. I can see that maybe 'pad' is not the best as it might get confused with 'p' spacing utility, but something similar is fine.

This is great for Spacing between toolbar items, buttons rows, image grids, paginations, etc and it matches the existing spacing utility sizes so everything looks good together.

Here is what I have been using in my projects and has been working great:

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

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

        @each $prop, $abbrev in (margin: pad) {
            @each $size, $length in $spacers {
                .#{$abbrev}#{$infix}-#{$size} > * {
                    #{$prop}: ($length / 2) !important;
                }
                .#{$abbrev}#{$infix}-#{$size} {
                    #{$prop}: -($length / 2) !important;
                }
                .#{$abbrev}#{$infix}x-#{$size} > * {
                    #{$prop}-right: ($length / 2) !important;
                    #{$prop}-left: ($length / 2) !important;
                }
                .#{$abbrev}#{$infix}x-#{$size} {
                    #{$prop}-right: -($length / 2) !important;
                    #{$prop}-left: -($length / 2) !important;
                }
                .#{$abbrev}#{$infix}y-#{$size} > * {
                    #{$prop}-top: ($length / 2) !important;
                    #{$prop}-bottom: ($length / 2) !important;
                }
                .#{$abbrev}#{$infix}y-#{$size} {
                    #{$prop}-top: -($length / 2) !important;
                    #{$prop}-bottom: -($length / 2) !important;
                }
            }
        }
    }
}

[mdo]

No plans to add this, thanks though. Too many utilities that perform similar tasks would add unnecessary bloat to the project.