Add a debugger class.

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 6f680664ca67b103f46207d49e551172917ef9f6..b57187fe5828a12b89c7178da07f647fbeef2ac9 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -1,5 +1,13 @@
 {
   "files": [
+    {
+      "path": "./dist/css/bootstrap-debugger.css",
+      "maxSize": "32.5 kB"
+    },
+    {
+      "path": "./dist/css/bootstrap-debugger.min.css",
+      "maxSize": "30.25 kB"
+    },
     {
       "path": "./dist/css/bootstrap-grid.css",
       "maxSize": "6.5 kB"

diff --git a/README.md b/README.md
index f7fa824f3797c9b92a511be0c096c7cb0129aca5..d547e1a27e2bbe6710f4354e4d56656e34b94cb2 100644 (file)
--- a/README.md
+++ b/README.md
@@ -83,6 +83,14 @@ Within the download you'll find the following directories and files, logically g
   ```text
   bootstrap/
   ├── css/
+  │   ├── bootstrap-debugger.css
+  │   ├── bootstrap-debugger.css.map
+  │   ├── bootstrap-debugger.min.css
+  │   ├── bootstrap-debugger.min.css.map
+  │   ├── bootstrap-debugger.rtl.css
+  │   ├── bootstrap-debugger.rtl.css.map
+  │   ├── bootstrap-debugger.rtl.min.css
+  │   ├── bootstrap-debugger.rtl.min.css.map
   │   ├── bootstrap-grid.css
   │   ├── bootstrap-grid.css.map
   │   ├── bootstrap-grid.min.css

diff --git a/scss/_debug.scss b/scss/_debug.scss
new file mode 100644 (file)
index 0000000..840bec3
--- /dev/null
+++ b/scss/_debug.scss
@@ -0,0 +1,44 @@
+@if $enable-debugger-classes {
+  .debug {
+    &::before {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 2000;
+      padding: $spacer * .5 $spacer;
+      font-family: $font-family-base;
+      color: $black;
+      background-color: $white;
+      border-radius: 0 0 4px; // stylelint-disable-line property-disallowed-list
+      @include font-size($h1-font-size);
+    }
+
+    @each $breakpoint, $value in $grid-breakpoints {
+      @include media-breakpoint-up($breakpoint) {
+        &::before {
+          content: "#{$breakpoint}";
+        }
+      }
+    }
+
+    [class^="container"],
+    &[class^="container"],
+    .row,
+    &.row {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1999;
+        pointer-events: none;
+        content: "";
+        background: repeating-linear-gradient(to right, transparent, transparent calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc(100% / 12)); // stylelint-disable-line function-disallowed-list
+        opacity: .3;
+      }
+    }
+  }
+}

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9db91c73a159786649c1386fa77665d5bdf82161..43ad8fd6a63cfb7004ca03cdbcc0252a7a56ee86 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -383,6 +383,7 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
+$enable-debugger-classes:     false !default;
 
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`

diff --git a/scss/bootstrap-debugger.scss b/scss/bootstrap-debugger.scss
new file mode 100644 (file)
index 0000000..078006c
--- /dev/null
+++ b/scss/bootstrap-debugger.scss
@@ -0,0 +1,3 @@
+$enable-debugger-classes: true; // stylelint-disable-line scss/dollar-variable-default
+
+@import "bootstrap";

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 52bd577e3ae57f75bf42c1c58cb210da9cd78203..7f70780049e1f893556ff3775c624581fb2e7971 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -58,5 +58,6 @@ $utilities: map-get-multiple(
     "padding-start",
   )
 );
+@import "debug";
 
 @import "utilities/api";

diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 449d704878fa210c85e09a2af91723eee9f14ad6..6e1134cb41318445ee715ae77973e486c327da69 100644 (file)
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -46,6 +46,7 @@
 
 // Helpers
 @import "helpers";
+@import "debug";
 
 // Utilities
 @import "utilities/api";

diff --git a/site/content/docs/5.3/customize/options.md b/site/content/docs/5.3/customize/options.md
index e2da964cdf1a660452b639ec01cb01dfc48e0db9..3ad40deb1e7c031f2321edea9d0cfda5be2bffa8 100644 (file)
--- a/site/content/docs/5.3/customize/options.md
+++ b/site/content/docs/5.3/customize/options.md
@@ -25,6 +25,7 @@ You can find and customize these variables for key global options in Bootstrap's
 | `$enable-caret`                | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
 | `$enable-button-pointers`      | `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-debugger-classes`     | `true` or `false` (default)        | Enables the use of `.debug` class. You can use it on any html element and it will highlight its children grids (`.row` and `.container-*`). It also displays the living breakpoint depending on the viewport. |
 | `$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` (default) or `false`        | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |

diff --git a/site/content/docs/5.3/getting-started/contents.md b/site/content/docs/5.3/getting-started/contents.md
index b53bffc740de99328b06f0706280a58f77abf79b..bd069d9441a439fa577f152a3afc557aa44c7a3f 100644 (file)
--- a/site/content/docs/5.3/getting-started/contents.md
+++ b/site/content/docs/5.3/getting-started/contents.md
@@ -15,6 +15,14 @@ Once downloaded, unzip the compressed folder and you'll see something like this:
 ```text
 bootstrap/
 ├── css/
+│   ├── bootstrap-debugger.css
+│   ├── bootstrap-debugger.css.map
+│   ├── bootstrap-debugger.min.css
+│   ├── bootstrap-debugger.min.css.map
+│   ├── bootstrap-debugger.rtl.css
+│   ├── bootstrap-debugger.rtl.css.map
+│   ├── bootstrap-debugger.rtl.min.css
+│   ├── bootstrap-debugger.rtl.min.css.map
 │   ├── bootstrap-grid.css
 │   ├── bootstrap-grid.css.map
 │   ├── bootstrap-grid.min.css
@@ -72,6 +80,7 @@ Bootstrap includes a handful of options for including some or all of our compile
 | CSS files | Layout | Content | Components | Utilities |
 | --- | --- | --- | --- | --- |
 | `bootstrap.css`<br> `bootstrap.min.css`<br> `bootstrap.rtl.css`<br> `bootstrap.rtl.min.css` | Included | Included | Included | Included |
+| `bootstrap-debugger.css`<br> `bootstrap-debugger.rtl.css`<br> `bootstrap-debugger.min.css`<br> `bootstrap-debugger.rtl.min.css` | Included (with debug classes) | Included | Included | Included |
 | `bootstrap-grid.css`<br> `bootstrap-grid.rtl.css`<br> `bootstrap-grid.min.css`<br> `bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
 | `bootstrap-utilities.css`<br> `bootstrap-utilities.rtl.css`<br> `bootstrap-utilities.min.css`<br> `bootstrap-utilities.rtl.min.css` | — | — | — | Included |
 | `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — |