Use multiplier numbers instead of shirt sizes for spacing utility class names

Created by: michaseel

Rename the spacerclasses.

Example: .m-a-0 // No margin .m-a // Default $spacer margin .m-a-2 // Double Margin .m-a-3 // Triple Margin

The Problem with using "md" or "lg" here is that you could confuse with the Breakpoints of the same name.

Plus: if you want to add Breakpoint-Specific Spacerclasses they would become impossible to remember: .m-a-lg-md // medium margin for large breakpoints -> hard to understand .m-a-lg-2 // double margin for large breakpoints -> easier to understand

scss/_utilities-spacing.scss

@@ -8,30 +8,30 @@
 .m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
 .m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }
 
-.m-a { margin:        $spacer !important; }
+.m-a { margin:        $spacer   !important; }
 .m-t { margin-top:    $spacer-y !important; }
 .m-r { margin-right:  $spacer-x !important; }
 .m-b { margin-bottom: $spacer-y !important; }
 .m-l { margin-left:   $spacer-x !important; }
 .m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
 .m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
-.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
+.m-x-auto { margin-right: auto  !important; margin-left: auto !important; }
 
-.m-a-md { margin:        ($spacer * 1.5) !important; }
-.m-t-md { margin-top:    ($spacer-y * 1.5) !important; }
-.m-r-md { margin-right:  ($spacer-y * 1.5) !important; }
-.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
-.m-l-md { margin-left:   ($spacer-y * 1.5) !important; }
-.m-x-md { margin-right:  ($spacer-x * 1.5) !important; margin-left:   ($spacer-x * 1.5) !important; }
-.m-y-md { margin-top:    ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }
+.m-a-2 { margin:        ($spacer * 2)   !important; }
+.m-t-2 { margin-top:    ($spacer-y * 2) !important; }
+.m-r-2 { margin-right:  ($spacer-y * 2) !important; }
+.m-b-2 { margin-bottom: ($spacer-y * 2) !important; }
+.m-l-2 { margin-left:   ($spacer-y * 2) !important; }
+.m-x-2 { margin-right:  ($spacer-x * 2) !important; margin-left:   ($spacer-x * 2) !important; }
+.m-y-2 { margin-top:    ($spacer-y * 2) !important; margin-bottom: ($spacer-y * 2) !important; }
 
-.m-a-lg { margin:        ($spacer * 3) !important; }
-.m-t-lg { margin-top:    ($spacer-y * 3) !important; }
-.m-r-lg { margin-right:  ($spacer-y * 3) !important; }
-.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
-.m-l-lg { margin-left:   ($spacer-y * 3) !important; }
-.m-x-lg { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
-.m-y-lg { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }
+.m-a-3 { margin:        ($spacer * 3) !important; }
+.m-t-3 { margin-top:    ($spacer-y * 3) !important; }
+.m-r-3 { margin-right:  ($spacer-y * 3) !important; }
+.m-b-3 { margin-bottom: ($spacer-y * 3) !important; }
+.m-l-3 { margin-left:   ($spacer-y * 3) !important; }
+.m-x-3 { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
+.m-y-3 { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }
 
 // Padding
 
@@ -43,7 +43,7 @@
 .p-x-0 { padding-right:  0 !important; padding-left:   0 !important; }
 .p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
 
-.p-a { padding:        $spacer !important; }
+.p-a { padding:        $spacer  !important; }
 .p-t { padding-top:    $spacer-y !important; }
 .p-r { padding-right:  $spacer-x !important; }
 .p-b { padding-bottom: $spacer-y !important; }
@@ -51,21 +51,21 @@
 .p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }
 .p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }
 
-.p-a-md { padding:        ($spacer * 1.5) !important; }
-.p-t-md { padding-top:    ($spacer-y * 1.5) !important; }
-.p-r-md { padding-right:  ($spacer-y * 1.5) !important; }
-.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; }
-.p-l-md { padding-left:   ($spacer-y * 1.5) !important; }
-.p-x-md { padding-right:  ($spacer-x * 1.5) !important; padding-left:   ($spacer-x * 1.5) !important; }
-.p-y-md { padding-top:    ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; }
+.p-a-2 { padding:        ($spacer * 2)   !important; }
+.p-t-2 { padding-top:    ($spacer-y * 2) !important; }
+.p-r-2 { padding-right:  ($spacer-y * 2) !important; }
+.p-b-2 { padding-bottom: ($spacer-y * 2) !important; }
+.p-l-2 { padding-left:   ($spacer-y * 2) !important; }
+.p-x-2 { padding-right:  ($spacer-x * 2) !important; padding-left:   ($spacer-x * 2) !important; }
+.p-y-2 { padding-top:    ($spacer-y * 2) !important; padding-bottom: ($spacer-y * 2) !important; }
 
-.p-a-lg { padding:        ($spacer * 3) !important; }
-.p-t-lg { padding-top:    ($spacer-y * 3) !important; }
-.p-r-lg { padding-right:  ($spacer-y * 3) !important; }
-.p-b-lg { padding-bottom: ($spacer-y * 3) !important; }
-.p-l-lg { padding-left:   ($spacer-y * 3) !important; }
-.p-x-lg { padding-right:  ($spacer-x * 3) !important; padding-left:   ($spacer-x * 3) !important; }
-.p-y-lg { padding-top:    ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; }
+.p-a-3 { padding:        ($spacer * 3)   !important; }
+.p-t-3 { padding-top:    ($spacer-y * 3) !important; }
+.p-r-3 { padding-right:  ($spacer-y * 3) !important; }
+.p-b-3 { padding-bottom: ($spacer-y * 3) !important; }
+.p-l-3 { padding-left:   ($spacer-y * 3) !important; }
+.p-x-3 { padding-right:  ($spacer-x * 3) !important; padding-left:   ($spacer-x * 3) !important; }
+.p-y-3 { padding-top:    ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; }
 
 // Positioning