CSS: Add a debugger class. #40976
CSS: Add a debugger class. #40976
Conversation
scss/bootstrap-debugger.scss
Outdated
| @@ -0,0 +1,3 @@ | |||
| $enable-debugger-classes: true; // stylelint-disable-line scss/dollar-variable-default | |||
|
|
|||
| @import "bootstrap"; | |||
There was a problem hiding this comment.
Personally, I would include only scss/_debug.scss (and the right imports for the compilation), so that bootstrap-debugger.css contains just the debugging elements. And then, no need for an RTL version.
And the other scss/bootstrap-*.scss wouldn't include @import "debug".
That way, everybody is using the same bootstrap*.css files (with the same sha384) and could enable the debugging part via Sass compilation and $enable-debugger-classes, or via CDN by importing bootstrap-debugger.css after (I suppose) the regular Bootstrap CSS files (RTL or not).
There was a problem hiding this comment.
I understand your point, I'va made the changes but for me, we should either have a $enable-debugger-classes and use @import in the good files or have no option and so let the users decide when they import it or not.
scss/_debug.scss
Outdated
| @@ -0,0 +1,44 @@ | |||
| @if $enable-debugger-classes { | |||
| .debug { | |||
There was a problem hiding this comment.
more specific naming like .bs-debug or .grid-breakpoint-debug will be good to avoid conflicts of user space class names.
There was a problem hiding this comment.
Yes definitely, i'm changing it.
| } | ||
| } | ||
|
|
||
| [class^="container"], |
There was a problem hiding this comment.
Can you provide this functionality as a seperated class name?
There was a problem hiding this comment.
Why not, I don't have strong opinion on this. I did it this way because on my project, we use sometimes .row and sometimes .container-* with .col-* inside. Do you have any cool name to propose ?
There was a problem hiding this comment.
This feature looks nice but the developer may want to toggle on/off this option to make the design look more clear and understandable.
You know, design considerations call for pixel-perfect work, and the overlay of this option can become annoying at some point.
.bs-debug-grid-marks, .bs-debug-grid-cols or something else like to understand of the purpose this utility.
It would be better if it does not have any connection with the other class name. The developer can use whatever he/she wants like <body class="bs-debug-grid-breakpoints bs-debug-grid-marks">
| @@ -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: true !default; | |||
There was a problem hiding this comment.
Yep, it's done on purpose at the moment to be able to test it on the deploy preview but I think it will go to false before getting merged.
| color: $black; | ||
| background-color: $white; | ||
| border-radius: 0 0 4px; // stylelint-disable-line property-disallowed-list | ||
| @include font-size($h1-font-size); |
There was a problem hiding this comment.
can this get font size from css a variable? then we may able to adjust it like <body style="--bs-debug-label-font-size: 15px;">
| top: 0; | ||
| left: 0; | ||
| z-index: 2000; | ||
| padding: $spacer * .5 $spacer; |
There was a problem hiding this comment.
can this use em unit instead of rem unit for padding? Then it may adjust itself by its font size.
Warning
Remove 186bda9 before merge.
Feel free to add the dist files if needed
Description
Add an option to help people use the grid by adding a debugger inside their website.
Basically, it's only a
.bs-grid-debugclass that you add on any element to see all the children grids initialized on all.container-*s and.rows (doesn't take into account the paddings added manually).I've added it as opt-in in the library, in this way:
There is many ways to implement it, so feel free to debate or argue in a way or another. For example, there are surely many other ways, but I can think of at least:
bootstrap-grid.cssandbootstrap.csssince it's not much now and can bring much for newcomers. I think I'd add it like this if it were only me.Depending on the answers below, I'll adapt the content if needed.
Feel free to debate with me the design choices.
Motivation & Context
Help people debug their grids.
Type of changes
Checklist
npm run lint)Live previews
Please add
.debugon any element inside any page to see it live.Related issues
Closes #40741.
Closes #40927.