Docs: Drop .grid where it shouldn't be used
#40790
Open
+27
−17
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Modifying site/content/docs/5.3/utilities/spacing.md is a good idea.
Indeed, our documentation is generated with $enable-cssgrid: true, but the default bootstrap.css file is generated with $enable-cssgrid: false.
Based on that, we should use .grid (and .g-col*) only in the docs page that explains it, and not in other pages as we're currently doing in site/content/docs/5.3/utilities/spacing.md. Otherwise, copying/pasting the code won't work for our users, and the reason can be difficult to understand.
| @@ -227,13 +227,23 @@ Adding more rows and changing the placement of columns: | |||
|
|
|||
| ### Gaps | |||
|
|
|||
| Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed. | |||
| Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed using either CSS properties, or CSS variables, or our [gap utilities]({{< docsref "/utilities/spacing#gap" >}}). | |||
There was a problem hiding this comment.
It feels weird to start this section by "Note that [...]". It's like there's a missing explanation. Maybe you could rather have something like:
- Change the gaps only by using our gap utilities + example
Change the vertical gaps only by modifying therow-gap. Note that we usegapon.grids, butrow-gapandcolumn-gapcan be modified as needed.+ exampleBecause of that, you can have different vertical and horizontalgaps, [...]+ example
What do you think?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Remove use of
.gridand use.d-gridinstead, in the doc part that shouldn't use specific classes like.gridand.g-col-*.Motivation & Context
Misunderstanding from the community.
The
.gridand all.g-col-*classes are displayed in our documentation but are not in our default packages. The page I changed doesn't display in a clear way why and how to enable these classes.Type of changes
Checklist
npm run lint)Live previews
Related issues
Closes #40726.