Skip to content

Commit b29893b

Browse files
julien-deramondjulien-deramond
authored
Docs: use correctly breakpoints as prefixes for utility classes, and docs content (#42347)
1 parent 653c124 commit b29893b

18 files changed

Lines changed: 83 additions & 81 deletions

File tree

‎js/tests/integration/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,21 @@ <h1>Hello, world!</h1>
2929
<div class="carousel-inner">
3030
<div class="carousel-item">
3131
<img class="d-block w-100" alt="First slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22400%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20800%20400%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M0%200h800v400H0z%22%2F%3E%3Ctext%20x%3D%22285.922%22%20y%3D%22217.7%22%20fill%3D%22%23555%22%20font-family%3D%22Helvetica%2Cmonospace%22%20font-size%3D%2240pt%22%20font-weight%3D%22400%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E">
32-
<div class="carousel-caption d-none d-md-block">
32+
<div class="carousel-caption d-none md:d-block">
3333
<h5>First slide label</h5>
3434
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
3535
</div>
3636
</div>
3737
<div class="carousel-item active">
3838
<img class="d-block w-100" alt="Second slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22400%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20800%20400%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M0%200h800v400H0z%22%2F%3E%3Ctext%20x%3D%22285.922%22%20y%3D%22217.7%22%20fill%3D%22%23555%22%20font-family%3D%22Helvetica%2Cmonospace%22%20font-size%3D%2240pt%22%20font-weight%3D%22400%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E">
39-
<div class="carousel-caption d-none d-md-block">
39+
<div class="carousel-caption d-none md:d-block">
4040
<h5>Second slide label</h5>
4141
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
4242
</div>
4343
</div>
4444
<div class="carousel-item">
4545
<img class="d-block w-100" alt="Third slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22400%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20800%20400%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M0%200h800v400H0z%22%2F%3E%3Ctext%20x%3D%22285.922%22%20y%3D%22217.7%22%20fill%3D%22%23555%22%20font-family%3D%22Helvetica%2Cmonospace%22%20font-size%3D%2240pt%22%20font-weight%3D%22400%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E">
46-
<div class="carousel-caption d-none d-md-block">
46+
<div class="carousel-caption d-none md:d-block">
4747
<h5>Third slide label</h5>
4848
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
4949
</div>

‎site/data/breakpoints.yml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,31 @@
55
container: ''
66

77
- breakpoint: sm
8-
abbr: -sm
8+
abbr: 'sm:'
99
name: Small
1010
min-width: 576px
1111
container: 540px
1212

1313
- breakpoint: md
14-
abbr: -md
14+
abbr: 'md:'
1515
name: Medium
1616
min-width: 768px
1717
container: 720px
1818

1919
- breakpoint: lg
20-
abbr: -lg
20+
abbr: 'lg:'
2121
name: Large
2222
min-width: 1024px
2323
container: 960px
2424

2525
- breakpoint: xl
26-
abbr: -xl
26+
abbr: 'xl:'
2727
name: X-Large
2828
min-width: 1280px
2929
container: 1200px
3030

3131
- breakpoint: 2xl
32-
abbr: -2xl
32+
abbr: '2xl:'
3333
name: 2X-Large
3434
min-width: 1536px
3535
container: 1440px

‎site/src/content/docs/components/card.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -375,15 +375,15 @@ And with the reverse layout:
375375

376376
Customize cards by using our theme color utilities. By default, cards use `bg` for their background and border colors when applying a theme color. Use `.card-subtle` to swap the background and border colors for a more subtle look.
377377

378-
<Example class="d-grid grid grid-cols-md-3" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
378+
<Example class="d-grid grid md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
379379
<div class="card-header">${themeColor.title}</div>
380380
<div class="card-body">
381381
<h4 class="card-title">Card title</h4>
382382
<p class="card-text">Card text…</p>
383383
</div>
384384
</div>`)} customMarkup={getData('theme-colors').map((themeColor) => `<div class="card card-${themeColor.name}">…</div>`)} />
385385

386-
<Example class="d-grid grid grid-cols-md-3" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
386+
<Example class="d-grid grid md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
387387
<div class="card-header">${themeColor.title}</div>
388388
<div class="card-body">
389389
<h4 class="card-title">Card title</h4>

‎site/src/content/docs/components/list-group.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,13 @@ These work great with custom content as well.
114114

115115
## Horizontal
116116

117-
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|2xl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
117+
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.{sm|md|lg|xl|2xl}:list-group-horizontal` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
118118

119119
**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
120120

121-
<Example code={getData('breakpoints').map((breakpoint) => `<ul class="list-group list-group-horizontal${breakpoint.abbr}">
121+
<Example
122+
class="vstack gap-3"
123+
code={getData('breakpoints').map((breakpoint) => `<ul class="list-group ${breakpoint.abbr}list-group-horizontal">
122124
<li class="list-group-item">An item</li>
123125
<li class="list-group-item">A second item</li>
124126
<li class="list-group-item">A third item</li>

‎site/src/content/docs/content/tables.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -621,7 +621,7 @@ Both `.table-stacked` and `.table-responsive` use container queries, so the `.ta
621621

622622
## Responsive tables
623623

624-
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-2xl}`.
624+
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.{sm|md|lg|xl|2xl}:table-responsive`.
625625

626626
The `.table-responsive` wrapper also acts as the container query context for [stacked tables](#stacked-tables).
627627

@@ -700,14 +700,14 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
700700

701701
### Breakpoint specific
702702

703-
Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
703+
Use `.{sm|md|lg|xl|2xl}:table-responsive` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
704704

705705
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
706706

707707
{getData('breakpoints').map((breakpoint) => {
708708
return (
709709
<div class="bd-example">
710-
<div class={`table-responsive${breakpoint.abbr}`}>
710+
<div class={`${breakpoint.abbr}table-responsive`}>
711711
<table class="table">
712712
<thead>
713713
<tr>
@@ -763,7 +763,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tab
763763
)
764764
})}
765765

766-
<Code code={getData('breakpoints').map((breakpoint) => `<div class="table-responsive${breakpoint.abbr}">
766+
<Code code={getData('breakpoints').map((breakpoint) => `<div class="${breakpoint.abbr}table-responsive">
767767
<table class="table">
768768
...
769769
</table>

‎site/src/content/docs/utilities/align-content.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -181,12 +181,12 @@ Responsive variations also exist for `align-content`.
181181
{getData('breakpoints').map((breakpoint) => {
182182
return (
183183
<Fragment>
184-
<li><code>.align-content{breakpoint.abbr}-start</code></li>
185-
<li><code>.align-content{breakpoint.abbr}-end</code></li>
186-
<li><code>.align-content{breakpoint.abbr}-center</code></li>
187-
<li><code>.align-content{breakpoint.abbr}-between</code></li>
188-
<li><code>.align-content{breakpoint.abbr}-around</code></li>
189-
<li><code>.align-content{breakpoint.abbr}-stretch</code></li>
184+
<li><code>.{breakpoint.abbr}align-content-start</code></li>
185+
<li><code>.{breakpoint.abbr}align-content-end</code></li>
186+
<li><code>.{breakpoint.abbr}align-content-center</code></li>
187+
<li><code>.{breakpoint.abbr}align-content-between</code></li>
188+
<li><code>.{breakpoint.abbr}align-content-around</code></li>
189+
<li><code>.{breakpoint.abbr}align-content-stretch</code></li>
190190
</Fragment>
191191
)
192192
})}

‎site/src/content/docs/utilities/align-items.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ Responsive variations also exist for `align-items`.
5959
{getData('breakpoints').map((breakpoint) => {
6060
return (
6161
<Fragment>
62-
<li><code>.align-items{breakpoint.abbr}-start</code></li>
63-
<li><code>.align-items{breakpoint.abbr}-end</code></li>
64-
<li><code>.align-items{breakpoint.abbr}-center</code></li>
65-
<li><code>.align-items{breakpoint.abbr}-baseline</code></li>
66-
<li><code>.align-items{breakpoint.abbr}-stretch</code></li>
62+
<li><code>.{breakpoint.abbr}align-items-start</code></li>
63+
<li><code>.{breakpoint.abbr}align-items-end</code></li>
64+
<li><code>.{breakpoint.abbr}align-items-center</code></li>
65+
<li><code>.{breakpoint.abbr}align-items-baseline</code></li>
66+
<li><code>.{breakpoint.abbr}align-items-stretch</code></li>
6767
</Fragment>
6868
)
6969
})}

‎site/src/content/docs/utilities/align-self.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ Responsive variations also exist for `align-self`.
5959
{getData('breakpoints').map((breakpoint) => {
6060
return (
6161
<Fragment>
62-
<li><code>.align-self{breakpoint.abbr}-start</code></li>
63-
<li><code>.align-self{breakpoint.abbr}-end</code></li>
64-
<li><code>.align-self{breakpoint.abbr}-center</code></li>
65-
<li><code>.align-self{breakpoint.abbr}-baseline</code></li>
66-
<li><code>.align-self{breakpoint.abbr}-stretch</code></li>
62+
<li><code>.{breakpoint.abbr}align-self-start</code></li>
63+
<li><code>.{breakpoint.abbr}align-self-end</code></li>
64+
<li><code>.{breakpoint.abbr}align-self-center</code></li>
65+
<li><code>.{breakpoint.abbr}align-self-baseline</code></li>
66+
<li><code>.{breakpoint.abbr}align-self-stretch</code></li>
6767
</Fragment>
6868
)
6969
})}

‎site/src/content/docs/utilities/flex.mdx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
3131
{getData('breakpoints').map((breakpoint) => {
3232
return (
3333
<Fragment>
34-
<li><code>.d{breakpoint.abbr}-flex</code></li>
35-
<li><code>.d{breakpoint.abbr}-inline-flex</code></li>
34+
<li><code>.{breakpoint.abbr}d-flex</code></li>
35+
<li><code>.{breakpoint.abbr}d-inline-flex</code></li>
3636
</Fragment>
3737
)
3838
})}
@@ -73,10 +73,10 @@ Responsive variations also exist for `flex-direction`.
7373
<ul>
7474
{getSequence(0, 5).map((i) => (
7575
<Fragment>
76-
<li><code>.flex{getData('breakpoints')[i].abbr}-row</code></li>
77-
<li><code>.flex{getData('breakpoints')[i].abbr}-row-reverse</code></li>
78-
<li><code>.flex{getData('breakpoints')[i].abbr}-column</code></li>
79-
<li><code>.flex{getData('breakpoints')[i].abbr}-column-reverse</code></li>
76+
<li><code>.{getData('breakpoints')[i].abbr}flex-row</code></li>
77+
<li><code>.{getData('breakpoints')[i].abbr}flex-row-reverse</code></li>
78+
<li><code>.{getData('breakpoints')[i].abbr}flex-column</code></li>
79+
<li><code>.{getData('breakpoints')[i].abbr}flex-column-reverse</code></li>
8080
</Fragment>
8181
))}
8282
</ul>
@@ -96,7 +96,7 @@ Responsive variations also exist for `flex-fill`.
9696
<ul>
9797
{getData('breakpoints').map((breakpoint) => {
9898
return (
99-
<li><code>.flex{breakpoint.abbr}-fill</code></li>
99+
<li><code>.{breakpoint.abbr}flex-fill</code></li>
100100
)
101101
})}
102102
</ul>
@@ -124,10 +124,10 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
124124
{getData('breakpoints').map((breakpoint) => {
125125
return (
126126
<Fragment>
127-
<li><code>.flex{breakpoint.abbr}-grow-0</code></li>
128-
<li><code>.flex{breakpoint.abbr}-grow-1</code></li>
129-
<li><code>.flex{breakpoint.abbr}-shrink-0</code></li>
130-
<li><code>.flex{breakpoint.abbr}-shrink-1</code></li>
127+
<li><code>.{breakpoint.abbr}flex-grow-0</code></li>
128+
<li><code>.{breakpoint.abbr}flex-grow-1</code></li>
129+
<li><code>.{breakpoint.abbr}flex-shrink-0</code></li>
130+
<li><code>.{breakpoint.abbr}flex-shrink-1</code></li>
131131
</Fragment>
132132
)
133133
})}
@@ -209,9 +209,9 @@ Responsive variations also exist for `flex-wrap`.
209209
{getData('breakpoints').map((breakpoint) => {
210210
return (
211211
<Fragment>
212-
<li><code>.flex{breakpoint.abbr}-nowrap</code></li>
213-
<li><code>.flex{breakpoint.abbr}-wrap</code></li>
214-
<li><code>.flex{breakpoint.abbr}-wrap-reverse</code></li>
212+
<li><code>.{breakpoint.abbr}flex-nowrap</code></li>
213+
<li><code>.{breakpoint.abbr}flex-wrap</code></li>
214+
<li><code>.{breakpoint.abbr}flex-wrap-reverse</code></li>
215215
</Fragment>
216216
)
217217
})}

‎site/src/content/docs/utilities/float.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ Here are all the support classes:
3434
{getData('breakpoints').map((breakpoint) => {
3535
return (
3636
<Fragment>
37-
<li><code>.float{breakpoint.abbr}-start</code></li>
38-
<li><code>.float{breakpoint.abbr}-end</code></li>
39-
<li><code>.float{breakpoint.abbr}-none</code></li>
37+
<li><code>.{breakpoint.abbr}float-start</code></li>
38+
<li><code>.{breakpoint.abbr}float-end</code></li>
39+
<li><code>.{breakpoint.abbr}float-none</code></li>
4040
</Fragment>
4141
)
4242
})}

0 commit comments

Comments
 (0)