From 833be9fe7db8efaa837a38cc5507f5d2b7ef5866 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Thu, 24 Oct 2024 23:06:22 +0200 Subject: [PATCH 1/7] Add a debugger class. --- .bundlewatch.config.json | 8 ++++ README.md | 8 ++++ scss/_debug.scss | 44 +++++++++++++++++++ scss/_variables.scss | 1 + scss/bootstrap-debugger.scss | 3 ++ scss/bootstrap-grid.scss | 1 + scss/bootstrap.scss | 1 + site/content/docs/5.3/customize/options.md | 1 + .../docs/5.3/getting-started/contents.md | 9 ++++ 9 files changed, 76 insertions(+) create mode 100644 scss/_debug.scss create mode 100644 scss/bootstrap-debugger.scss diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 6f680664ca67..b57187fe5828 100644 --- 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 f7fa824f3797..d547e1a27e2b 100644 --- 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 index 000000000000..840bec3851c3 --- /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 9db91c73a159..43ad8fd6a63c 100644 --- 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 index 000000000000..078006c1316a --- /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 52bd577e3ae5..7f70780049e1 100644 --- 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 449d704878fa..6e1134cb4131 100644 --- 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 e2da964cdf1a..3ad40deb1e7c 100644 --- 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 b53bffc740de..bd069d9441a4 100644 --- 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`
`bootstrap.min.css`
`bootstrap.rtl.css`
`bootstrap.rtl.min.css` | Included | Included | Included | Included | +| `bootstrap-debugger.css`
`bootstrap-debugger.rtl.css`
`bootstrap-debugger.min.css`
`bootstrap-debugger.rtl.min.css` | Included (with debug classes) | Included | Included | Included | | `bootstrap-grid.css`
`bootstrap-grid.rtl.css`
`bootstrap-grid.min.css`
`bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | | `bootstrap-utilities.css`
`bootstrap-utilities.rtl.css`
`bootstrap-utilities.min.css`
`bootstrap-utilities.rtl.min.css` | — | — | — | Included | | `bootstrap-reboot.css`
`bootstrap-reboot.rtl.css`
`bootstrap-reboot.min.css`
`bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | From 186bda9062b3d9733480e08bec0fa1e5dd6d9afd Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Thu, 24 Oct 2024 23:10:42 +0200 Subject: [PATCH 2/7] Revert before merge --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 43ad8fd6a63c..df1e582dfce6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -383,7 +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-debugger-classes: true !default; $enable-dark-mode: true !default; $color-mode-type: data !default; // `data` or `media-query` From 394b161faa82e123455d24823915f67488d97782 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Thu, 24 Oct 2024 23:22:12 +0200 Subject: [PATCH 3/7] Fix Bundlewatch --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index b57187fe5828..318e921bb6bb 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -10,11 +10,11 @@ }, { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "6.5 kB" + "maxSize": "7.0 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.0 kB" + "maxSize": "6.25 kB" }, { "path": "./dist/css/bootstrap-reboot.css", From f58c9c505aa7cafe1b1611e2bb5cc3f08f7352c0 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 25 Oct 2024 09:54:58 +0200 Subject: [PATCH 4/7] fix(review) --- .bundlewatch.config.json | 4 ++-- scss/bootstrap-debugger.scss | 8 ++++++-- site/content/docs/5.3/getting-started/contents.md | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 318e921bb6bb..92d96957d530 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/bootstrap-debugger.css", - "maxSize": "32.5 kB" + "maxSize": "0.75 kB" }, { "path": "./dist/css/bootstrap-debugger.min.css", - "maxSize": "30.25 kB" + "maxSize": "0.75 kB" }, { "path": "./dist/css/bootstrap-grid.css", diff --git a/scss/bootstrap-debugger.scss b/scss/bootstrap-debugger.scss index 078006c1316a..4005ab759141 100644 --- a/scss/bootstrap-debugger.scss +++ b/scss/bootstrap-debugger.scss @@ -1,3 +1,7 @@ -$enable-debugger-classes: true; // stylelint-disable-line scss/dollar-variable-default +$enable-debugger-classes: true !default; -@import "bootstrap"; +@import "functions"; +@import "variables"; +@import "mixins"; + +@import "debug"; diff --git a/site/content/docs/5.3/getting-started/contents.md b/site/content/docs/5.3/getting-started/contents.md index bd069d9441a4..62b3c57acc5b 100644 --- a/site/content/docs/5.3/getting-started/contents.md +++ b/site/content/docs/5.3/getting-started/contents.md @@ -80,7 +80,7 @@ Bootstrap includes a handful of options for including some or all of our compile | CSS files | Layout | Content | Components | Utilities | | --- | --- | --- | --- | --- | | `bootstrap.css`
`bootstrap.min.css`
`bootstrap.rtl.css`
`bootstrap.rtl.min.css` | Included | Included | Included | Included | -| `bootstrap-debugger.css`
`bootstrap-debugger.rtl.css`
`bootstrap-debugger.min.css`
`bootstrap-debugger.rtl.min.css` | Included (with debug classes) | Included | Included | Included | +| `bootstrap-debugger.css`
`bootstrap-debugger.rtl.css`
`bootstrap-debugger.min.css`
`bootstrap-debugger.rtl.min.css` | [Only debug classes]({{< docsref "/customize/options" >}}) | — | — | — | | `bootstrap-grid.css`
`bootstrap-grid.rtl.css`
`bootstrap-grid.min.css`
`bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | | `bootstrap-utilities.css`
`bootstrap-utilities.rtl.css`
`bootstrap-utilities.min.css`
`bootstrap-utilities.rtl.min.css` | — | — | — | Included | | `bootstrap-reboot.css`
`bootstrap-reboot.rtl.css`
`bootstrap-reboot.min.css`
`bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | From 76449ba3e3bdbf8d30320462b50a69c7a25714b7 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 13 Nov 2024 17:06:58 +0100 Subject: [PATCH 5/7] Change class name --- scss/_debug.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_debug.scss b/scss/_debug.scss index 840bec3851c3..b9a3acd2114a 100644 --- a/scss/_debug.scss +++ b/scss/_debug.scss @@ -1,5 +1,5 @@ @if $enable-debugger-classes { - .debug { + .#{$prefix}grid-debug { &::before { position: fixed; top: 0; From f7b15cdaffd1c6ea549de676d83154f1754ec2a7 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 13 Nov 2024 17:10:23 +0100 Subject: [PATCH 6/7] Change documentation accordingly --- site/content/docs/5.3/customize/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/customize/options.md b/site/content/docs/5.3/customize/options.md index 3ad40deb1e7c..ddbd51ba4208 100644 --- a/site/content/docs/5.3/customize/options.md +++ b/site/content/docs/5.3/customize/options.md @@ -25,7 +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-debugger-classes` | `true` or `false` (default) | Enables the use of `.bs-grid-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`. | From 129115f7e11112496edca92b46f6c4adfce738e3 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 3 Dec 2024 11:20:49 +0100 Subject: [PATCH 7/7] fix(review) --- scss/_debug.scss | 42 +++++++++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/scss/_debug.scss b/scss/_debug.scss index b9a3acd2114a..c39f154785c0 100644 --- a/scss/_debug.scss +++ b/scss/_debug.scss @@ -1,16 +1,33 @@ @if $enable-debugger-classes { - .#{$prefix}grid-debug { + %grid-debug { + 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; + } + } + + .#{$prefix}debug-grids { &::before { position: fixed; top: 0; left: 0; z-index: 2000; - padding: $spacer * .5 $spacer; + padding: .5em 1em; 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); + @include font-size(var(--#{$prefix}debug-label-font-size, $h1-font-size)); } @each $breakpoint, $value in $grid-breakpoints { @@ -25,20 +42,11 @@ &[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; - } + @extend %grid-debug; } } + + .#{$prefix}debug-grid-cols { + @extend %grid-debug; + } }