v4 - Consider using px-to-rem conversions instead of hard-coded rem's

Created by: Jakobud

For readability reasons I would consider using a px-to-rem mixin (https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=px+to+rem+sass+mixin) instead of hard coding rem's everywhere. The reason for this is simply because people can more easily recognize what pixel sizes are compared to rems and ems.

For example, everyone knows that a iPad width is 768px. 99% of people aren't going to know what that is in em/rem. But when I look in the V4 source, and I see the the grid sizes for tablet at 48em I'm like "uhhh... okay so how wide is that really? Lets see here, assuming 16px base font size, 16*48=768. Oh that means 768px okay".

It's pretty easy in SASS to do a mixin to convert px-to-rem:

h2 {
  font-size: rem(24);   // 24px value that will be converted to 1.5rem
}

It's very readable. Any developer can look and see that the value is 24px but that SASS is going to convert the final value to rem. Again, it's easy for developers to visualize what 24px is. It's not easy for developers to visualize what 1.5rem (24/16) looks like...

Also, here is proof from the v4 source itself that this should be considered:

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L106 https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L118

You are feeling the need to add comments to help people understand how big those rems are. Would be a lot more simple to just do:

$container-max-widths: (
  sm: rem(480),
  md: rem(720),
  lg: rem(960),
  xl: rem(1140)
) !default;

It's more readable and results in the same rem values in the end.

So in short, keep everything in rem's in the end product, yes, but use pixels to get there because it's easier to visualize and more familiar to developers. Use SASS mixins to your advantage here.

I would be more than willing to help in this transition if the idea is accepted.