Bootstrap: Refactor Responsive Spacing Utilities - Suggestion

[gilronc]

So i just started playing around with the new responsive spacer utilities and they seem great! One suggestion though -- Can the Spacing Utilities be mapped more logically.

Instead of:

.mx-5{
  margin-top: 3rem
  margin-bottom: 3rem
}

Maybe it should be

.mx-5{
  margin-top: 5rem;
  margin-bottom: 5rem;
}

I previously created some spacing utilities on a project that i'm working on and i was mapping the rem values one-to-one for ease of use.

eg: p-1 = padding: 1rem;
p-2 = padding: 2rem;
p-3 = padding: 3rem;
This just seems more user friendly to me than p-3 = padding: 1rem;

Some insight as to why the scaling was chosen would really help, thanks :)

18490

@mdo
@guylepage3

[guylepage3]

@gilronc, I like this much better as it makes it easier for spacing but what do you propose for .5rem?

[Starsam80]

I actually like this idea, where you a leading zero to the number: .p-05 { padding: .5rem; }. I don't know if that is going to work nicely with SASS though.

[gilronc]

@guylepage3 , @Starsam80 , @loupiot

This version looks good, its just way easier to remember and to read the scale. The dashes between the numbers represent the points like 0.5rem (p-0-5) and then we can scale from there up to p-100 (padding: 100rem if needed lol.

p-0-3 = padding: 0.3rem;
p-0-5 = padding: 0.5rem;
p-1 = padding: 1rem;
p-2 = padding: 2rem;
p-3 = padding: 3rem;
p-4 = padding: 4rem;
p-5 = padding: 5rem;

Others

pr-0-5 = padding-right: 0.5rem;
px-0-5 = padding-right: 0.5rem; padding-left: 0.5rem;

I tend to use p-5 like this:

<section class="p-5">
  <Large Section/>
</section>

and p-0-3 like this:

<div class="card">
   <div class="p-0-3"></div>
</div>

So, i'm mostly using the bigger classes (p-3 to p-6) for larger sections ( Segmenting articles, groups of cards and anything else that represent changing content types ). The smaller classes(p-0-3) are mostly used within modules (Cards, Accordions, Tabs ....etc) to create variations and tiny adjustments.

[guylepage3]

Hm.. @gilronc, I'm not sure if that's intuitive enough. What about something like...

p-03 = padding: 0.3rem;
p-05 = padding: 0.5rem;
p-10 = padding: 1rem;
p-15 = padding: 1.5rem;
p-20 = padding: 2rem;
p-30 = padding: 3rem;
p-40 = padding: 4rem;
p-50 = padding: 5rem;

[tomlutzenberger]

@guylepage3 What if you only want one side (e.g. padding-left) or vertical (top + bottom)?
On the other hand, this would blow up the code a lot.

[Starsam80]

@tomlutzenberger I would assume this would add on to the previous code, so the classes like .pl-* for padding-left and .py-* for padding-top and padding-bottom would stay the same: See https://v4-alpha.getbootstrap.com/utilities/spacing/

[tomlutzenberger]

Oh, I see. But still... Adding more like @gilronc suggested, would double up the code. I wonder if this will be needed in actual projects. Maybe it can be kept as is, but introducing a mixin which makes it possible to make your own custom utility classes.
I think of something like:

@mixin spacing-utility-custom($start, $end, $step) {
  // ...
}

The output classes then should have the same naming scheme, but with a prefix/suffix (c for custom?).

[guylepage3]

@tomlutzenberger I see what you're saying.. then I suggest the following..

p-03 = padding: 0.3rem;
p-05 = padding: 0.5rem;
p-10 = padding: 1rem;
p-15 = padding: 1.5rem;
p-20 = padding: 2rem;
p-30 = padding: 3rem;
p-40 = padding: 4rem;
p-50 = padding: 5rem;
padding specifics:
p-r-40 = padding-right: 4rem;

This seems to be pretty intuitive to me, I feel. Thoughts?

[Starsam80]

@guylepage3 The change to remove the dash was pretty specific (ae784c9521101c391ecc98e906ddf18e6aeb459b, #20684), so I don't think that should be changed back.
I also don't like how 10 means 1rem. Sure, it makes it a uniform 2 digits, but after thinking about it, I don't think that is necessary; I think it should be kept simple (Sorta related: https://github.com/twbs/bootstrap/issues/21313#issuecomment-265544542)

Here is what I suggest:

.p-0 = padding: 0;
.p-1 = padding: 1rem;
.p-2 = padding: 2rem;
.pl-1 = padding-left: 1rem;
.p-03 = padding: .3rem;
.pl-03 = padding-left: .3rem;

With this, it would also be easier for people to update to the latest alpha without having to change all the spacer utilities.

[guylepage3]

@Starsam80 if you take a look, I am actually not requiring a change to remove the dash.

padding specifics:
p-r-40 = padding-right: 4rem;

[Starsam80]

@guylepage3 Maybe I wasn't clear enough. What I was trying to say is that the dash did exist before, but it was removed in ae784c9521101c391ecc98e906ddf18e6aeb459b / #20684, so your idea of adding the dash back doesn't seem like a good idea to me.

[guylepage3]

gotcha. thx @Starsam80. so it would look like this. correct?

padding specifics:
pr-40 = padding-right: 4rem;

[mdo]

I don't think we should go this route. It's meant to be a scale, not a 1:1 mapping. Perhaps we can clarify this in our docs and source Sass files?

And regarding the increments of 10 I've seen in some of these comments, that'll lead to more problems down the line. It assumes a multiple of 10, but in fact our root element (which all rem values are based upon) is assumed to be 16.

[entozoon]

I agree that increments or a 1:1 mapping might be a bad choice, do we not think it could be more consistent though at least?
I.e. my other issue, which isn't quite a dupe of these suggestions
https://github.com/twbs/bootstrap/issues/21702

[vicovictor]

Here's something that I am using personally, in SCSS:

$spacers: (
  '000': (
    x: 0,
    y: 0
  ),
  '025': (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  '050': (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  100: (
    x: $spacer-x,
    y: $spacer-y
  ),
  125: (
    x: ($spacer-x * 1.25),
    y: ($spacer-y * 1.25)
  ),
  150: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  200: (
    x: ($spacer-x * 2),
    y: ($spacer-y * 2)
  ),
  300: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  ),
  400: (
    x: ($spacer-x * 4),
    y: ($spacer-y * 4)
  ),
  500: (
    x: ($spacer-x * 5),
    y: ($spacer-y * 5)
  )
);

I find this more readable than trying to figure out what -1, -2, -3, etc. does. With this, I know mt-125 gives me margin-top: 1.25rem.

[entozoon]

+1 for percentages of the spacer variable, as above.