refactor: divider documentation #2978
Next
Next commit
refactor: divider documentation
- Loading branch information
commit 154566f4ae03231eb24be7aa7774a2d56d53e015
There are no files selected for viewing
This file contains hidden or 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
|
Member
There was a problem hiding this comment. We've lost the colored bg part, I can't remember if it was asked or not 🤔
Member
Author
There was a problem hiding this comment. You have some examples in the color section, isn't it enough? |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,78 @@ | ||||||||
| --- | ||||||||
| layout: docs | ||||||||
| title: Divider | ||||||||
| description: Use the horizontal or vertical rule helpers to create dividers. A divider can be used to visually structure an interface by clearly separating content sections. | ||||||||
| group: helpers | ||||||||
| aliases: | ||||||||
| - "/docs/helpers/divider/" | ||||||||
|
Member
There was a problem hiding this comment. Should we add ? for links compatibility
Suggested change
Member
Author
There was a problem hiding this comment. /docs/helpers/dividers only exist since 0.4, I don't think anyone has bookmarked it yet. ;-)
Collaborator
There was a problem hiding this comment. If a page has already been published, the file exists in the gh-pages branch. If we don't keep this alias for new versions, Hugo will not generate a new page with a redirection, and when we'll update the doc we will not overwrite the existing file. Therefore we will have the old page available on
Member
Author
There was a problem hiding this comment. Ok noted. I add the link for compatibility |
||||||||
| - "/docs/helpers/vertical-rule/" | ||||||||
| toc: true | ||||||||
| --- | ||||||||
|
|
||||||||
| ## Horizontal rules | ||||||||
|
|
||||||||
| Horizontal rules should use the `<hr>` tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, prefer using a border CSS property on a `<div>` or our [border utilities]({{< docsref "/utilities/borders" >}}), or even ensure to hide it from assistive technologies (e.g., `aria-hidden="true"`). | ||||||||
|
Collaborator
There was a problem hiding this comment. Maybe we should be less specific and say "on an element" or "on an HTML element" rather than "on a div" ?
Member
Author
There was a problem hiding this comment. Ok for me, I updated the doc |
||||||||
|
|
||||||||
| {{< example >}} | ||||||||
| <hr> | ||||||||
| <div class="border-top border-default my-medium"></div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| ## Vertical rules | ||||||||
|
|
||||||||
| Vertical rules are inspired by the `<hr>` element. The `vr` class allows you to create vertical dividers in common layouts. They're styled just like `<hr>` elements. They have `min-height` of `1em`. | ||||||||
|
|
||||||||
| {{< example >}} | ||||||||
| <div class="vr"></div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| Vertical rules scale their height in flex layouts: | ||||||||
|
|
||||||||
| {{< example class="d-flex" >}} | ||||||||
| <div class="d-flex" style="height: 50px;"> | ||||||||
| <div class="vr"></div> | ||||||||
| </div> | ||||||||
| <div class="d-flex" style="height: 80px;"> | ||||||||
| <div class="vr"></div> | ||||||||
| </div> | ||||||||
| <div class="d-flex" style="height: 100px;"> | ||||||||
| <div class="vr"></div> | ||||||||
| </div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| ## Color | ||||||||
|
|
||||||||
| Change the divider color using the [border color utilities]({{< docsref "/utilities/borders/#color" >}}). | ||||||||
|
|
||||||||
| {{< example class="d-flex flex-column gap-1" >}} | ||||||||
| <div><hr class="border-muted"></div> | ||||||||
| <div><hr class="border-emphasized"></div> | ||||||||
| <div><hr class="border-brand-primary"></div> | ||||||||
|
Collaborator
There was a problem hiding this comment. I think we could remove the |
||||||||
| <div data-bs-theme="light" class="bg-brand-primary py-shortest"><hr class="border-on-brand-primary"></div> | ||||||||
| <div data-bs-theme="light" class="bg-always-white py-shortest"><hr class="border-always-black"></div> | ||||||||
| <div data-bs-theme="dark" class="bg-always-black py-shortest"><hr class="border-always-white"></div> | ||||||||
| <div data-bs-theme="dark" class="bg-always-black py-shortest"><hr class="border-always-on-black"></div> | ||||||||
| <div data-bs-theme="light" class="bg-always-white py-shortest"><hr class="border-always-on-white"></div> | ||||||||
| {{< /example >}} | ||||||||
|
louismaximepiton marked this conversation as resolved.
|
||||||||
|
|
||||||||
| {{< bootstrap-compatibility >}} | ||||||||
| The `<hr>` and `vr` color can be set using [colors utilities]({{< docsref "/utilities/colors" >}}) | ||||||||
| {{< example >}} | ||||||||
| <hr class="text-brand-emphazied"> | ||||||||
| <div class="vr text-brand-primary"></div> | ||||||||
| {{< /example >}} | ||||||||
| {{< /bootstrap-compatibility >}} | ||||||||
|
|
||||||||
| ## Size | ||||||||
|
|
||||||||
| Change the divider thickness using the [border width utilities]({{< docsref "/utilities/borders/#width" >}}). | ||||||||
|
|
||||||||
| {{< example>}} | ||||||||
| <div class="d-flex" style="height: 50px;"> | ||||||||
| <div class="vr border-thin"></div> | ||||||||
| <div class="vr border-medium"></div> | ||||||||
| <div class="vr border-thick"></div> | ||||||||
| <div class="vr border-thicker"></div> | ||||||||
| </div> | ||||||||
| {{< /example >}} | ||||||||
|
louismaximepiton marked this conversation as resolved.
|
||||||||
|
|
||||||||
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
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.
Uh oh!
There was an error while loading. Please reload this page.