-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Docs: Drop .grid
where it shouldn't be used
#40790
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 the
row-gap. Note that we use
gapon
.grids, but
row-gapand
column-gapcan be modified as needed.
+ exampleBecause of that, you can have different vertical and horizontal
gaps, [...]
+ example
What do you think?
Description
Remove use of
.grid
and use.d-grid
instead, in the doc part that shouldn't use specific classes like.grid
and.g-col-*
.Motivation & Context
Misunderstanding from the community.
The
.grid
and 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.