Disable negative margins by default (twbs#30585)

* Disable negative margins by default * Use shorter enable variable Co-authored-by: XhmikosR <xhmikosr@gmail.com>
olsza · Oct 3, 2020 · cec68c5 · cec68c5
1 parent 4243c25
commit cec68c5
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 12 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -214,6 +214,7 @@ $enable-grid-classes:                         true !default;
 $enable-pointer-cursor-for-buttons:           true !default;
 $enable-rfs:                                  true !default;
 $enable-validation-icons:                     true !default;
+$enable-negative-margins:                     false !default;
 $enable-deprecation-messages:                 true !default;
 $enable-important-utilities:                  true !default;
 
@@ -234,7 +235,7 @@ $spacers: (
   5: $spacer * 3,
 ) !default;
 
-$negative-spacers: negativify-map($spacers) !default;
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
 // Body
 //

diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
@@ -277,8 +277,9 @@ You can find and customize these variables for key global options in Bootstrap's
 | `$enable-grid-classes`                       | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
 | `$enable-caret`                              | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
 | `$enable-pointer-cursor-for-buttons`         | `true` (default) or `false`        | Add "hand" cursor to non-disabled button elements. |
-| `$enable-rfs`                                | `true` (default)  or `false`       | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
+| `$enable-rfs`                                | `true` (default) or `false`        | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
 | `$enable-validation-icons`                   | `true` (default) or `false`        | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
+| `$enable-negative-margins`                   | `true` or `false` (default)        | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
 | `$enable-deprecation-messages`               | `true` or `false` (default)        | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |
 | `$enable-important-utilities`                | `true` (default) or `false`        | Enables the `!important` suffix in utility classes. |
 

diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
@@ -166,6 +166,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 - Added `.bg-body` for quickly setting the `<body>`'s background to additional elements.
 - **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore
 - **Todo:** Split utilities into property-value utility classes and helpers
+- Negative margin utilities are disabled by default. You can re-enable them by setting `$enable-negative-margins: true`, but keep in mind this can increase the file size quite a lot.
 
 ## Docs
 

diff --git a/site/content/docs/4.3/utilities/spacing.md b/site/content/docs/4.3/utilities/spacing.md
@@ -84,7 +84,7 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente
 
 ### Negative margin
 
-In CSS, `margin` properties can utilize negative values (`padding` cannot). As of 4.2, we've added negative margin utilities for every non-zero integer size listed above (e.g., `1`, `2`, `3`, `4`, `5`). These utilities are ideal for customizing grid column gutters across breakpoints.
+In CSS, `margin` properties can utilize negative values (`padding` cannot). These negative margins are **disabled by default**, but can be enabled in Sass by setting `$enable-negative-margins: true`.
 
 The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`:
 
@@ -93,12 +93,3 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
   margin-top: -0.25rem !important;
 }
 {{< /highlight >}}
-
-Here's an example of customizing the Bootstrap grid at the medium (`md`) breakpoint and above. We've increased the `.col` padding with `.px-md-5` and then counteracted that with `.mx-md-n5` on the parent `.row`.
-
-{{< example >}}
-<div class="row mx-md-n5">
-  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
-  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
-</div>
-{{< /example >}}