Docs: use correctly breakpoints as prefixes for utility classes, and docs content...

diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html
index 3e3035d3c8e632545435ced1a2ab595c4b867eae..e4fa9f0a382d204d8676131f891bd73478e9f15b 100644 (file)
--- a/js/tests/integration/index.html
+++ b/js/tests/integration/index.html
@@ -29,21 +29,21 @@
           <div class="carousel-inner">
             <div class="carousel-item">
               <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">
-              <div class="carousel-caption d-none d-md-block">
+              <div class="carousel-caption d-none md:d-block">
                 <h5>First slide label</h5>
                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
               </div>
             </div>
             <div class="carousel-item active">
               <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">
-              <div class="carousel-caption d-none d-md-block">
+              <div class="carousel-caption d-none md:d-block">
                 <h5>Second slide label</h5>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
             </div>
             <div class="carousel-item">
               <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">
-              <div class="carousel-caption d-none d-md-block">
+              <div class="carousel-caption d-none md:d-block">
                 <h5>Third slide label</h5>
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
               </div>

diff --git a/site/data/breakpoints.yml b/site/data/breakpoints.yml
index 03d7b21d27eee073fe51caf01e0ce0dba05faae2..1ea3dfbd1bf50f88813e5924fa3f628e9f347a29 100644 (file)
--- a/site/data/breakpoints.yml
+++ b/site/data/breakpoints.yml
@@ -5,31 +5,31 @@
   container: ''
 
 - breakpoint: sm
-  abbr: -sm
+  abbr: 'sm:'
   name: Small
   min-width: 576px
   container: 540px
 
 - breakpoint: md
-  abbr: -md
+  abbr: 'md:'
   name: Medium
   min-width: 768px
   container: 720px
 
 - breakpoint: lg
-  abbr: -lg
+  abbr: 'lg:'
   name: Large
   min-width: 1024px
   container: 960px
 
 - breakpoint: xl
-  abbr: -xl
+  abbr: 'xl:'
   name: X-Large
   min-width: 1280px
   container: 1200px
 
 - breakpoint: 2xl
-  abbr: -2xl
+  abbr: '2xl:'
   name: 2X-Large
   min-width: 1536px
   container: 1440px

diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx
index a3696436e8f7775140f999fb7b7b1a6575d031d0..cb963aefa9a80333183ede17dba0c414244d22ed 100644 (file)
--- a/site/src/content/docs/components/card.mdx
+++ b/site/src/content/docs/components/card.mdx
@@ -375,7 +375,7 @@ And with the reverse layout:
 
 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.
 
-<Example class="d-grid grid grid-cols-md-3" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
+<Example class="d-grid grid md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
     <div class="card-header">${themeColor.title}</div>
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
@@ -383,7 +383,7 @@ Customize cards by using our theme color utilities. By default, cards use `bg` f
     </div>
   </div>`)} customMarkup={getData('theme-colors').map((themeColor) => `<div class="card card-${themeColor.name}">…</div>`)} />
 
-<Example class="d-grid grid grid-cols-md-3" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
+<Example class="d-grid grid md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
     <div class="card-header">${themeColor.title}</div>
     <div class="card-body">
       <h4 class="card-title">Card title</h4>

diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index c4244663efe77dbd554dcd948b6f4ad641fbf8fa..32a90c9f93727564e25e6cfa70a2c8200716f36b 100644 (file)
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -114,11 +114,13 @@ These work great with custom content as well.
 
 ## Horizontal
 
-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.**
+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.**
 
 **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
 
-<Example code={getData('breakpoints').map((breakpoint) => `<ul class="list-group list-group-horizontal${breakpoint.abbr}">
+<Example
+  class="vstack gap-3"
+  code={getData('breakpoints').map((breakpoint) => `<ul class="list-group ${breakpoint.abbr}list-group-horizontal">
     <li class="list-group-item">An item</li>
     <li class="list-group-item">A second item</li>
     <li class="list-group-item">A third item</li>

diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx
index 10db4b92cc69bf604082c7aa3751fdcf87710802..1144373936e2c1260db1d1a3cef86df1c866103e 100644 (file)
--- a/site/src/content/docs/content/tables.mdx
+++ b/site/src/content/docs/content/tables.mdx
@@ -621,7 +621,7 @@ Both `.table-stacked` and `.table-responsive` use container queries, so the `.ta
 
 ## Responsive tables
 
-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}`.
+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`.
 
 The `.table-responsive` wrapper also acts as the container query context for [stacked tables](#stacked-tables).
 
@@ -700,14 +700,14 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 
 ### Breakpoint specific
 
-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.
+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.
 
 **These tables may appear broken until their responsive styles apply at specific viewport widths.**
 
 {getData('breakpoints').map((breakpoint) => {
   return (
     <div class="bd-example">
-      <div class={`table-responsive${breakpoint.abbr}`}>
+      <div class={`${breakpoint.abbr}table-responsive`}>
         <table class="table">
           <thead>
             <tr>
@@ -763,7 +763,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tab
   )
 })}
 
-<Code code={getData('breakpoints').map((breakpoint) => `<div class="table-responsive${breakpoint.abbr}">
+<Code code={getData('breakpoints').map((breakpoint) => `<div class="${breakpoint.abbr}table-responsive">
     <table class="table">
       ...
     </table>

diff --git a/site/src/content/docs/utilities/align-content.mdx b/site/src/content/docs/utilities/align-content.mdx
index 32670e99a3fe36f6e6c09dc373a57535f859647b..7e2e37779dfb3ba6c82ce21c22a41486ed419b25 100644 (file)
--- a/site/src/content/docs/utilities/align-content.mdx
+++ b/site/src/content/docs/utilities/align-content.mdx
@@ -181,12 +181,12 @@ Responsive variations also exist for `align-content`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.align-content{breakpoint.abbr}-start</code></li>
-      <li><code>.align-content{breakpoint.abbr}-end</code></li>
-      <li><code>.align-content{breakpoint.abbr}-center</code></li>
-      <li><code>.align-content{breakpoint.abbr}-between</code></li>
-      <li><code>.align-content{breakpoint.abbr}-around</code></li>
-      <li><code>.align-content{breakpoint.abbr}-stretch</code></li>
+      <li><code>.{breakpoint.abbr}align-content-start</code></li>
+      <li><code>.{breakpoint.abbr}align-content-end</code></li>
+      <li><code>.{breakpoint.abbr}align-content-center</code></li>
+      <li><code>.{breakpoint.abbr}align-content-between</code></li>
+      <li><code>.{breakpoint.abbr}align-content-around</code></li>
+      <li><code>.{breakpoint.abbr}align-content-stretch</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/align-items.mdx b/site/src/content/docs/utilities/align-items.mdx
index 0e5f05a8069628b7e9e2861c9b116a2680bb5016..429ec2e4bafa58861349af83011d6dba6033b7ef 100644 (file)
--- a/site/src/content/docs/utilities/align-items.mdx
+++ b/site/src/content/docs/utilities/align-items.mdx
@@ -59,11 +59,11 @@ Responsive variations also exist for `align-items`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.align-items{breakpoint.abbr}-start</code></li>
-      <li><code>.align-items{breakpoint.abbr}-end</code></li>
-      <li><code>.align-items{breakpoint.abbr}-center</code></li>
-      <li><code>.align-items{breakpoint.abbr}-baseline</code></li>
-      <li><code>.align-items{breakpoint.abbr}-stretch</code></li>
+      <li><code>.{breakpoint.abbr}align-items-start</code></li>
+      <li><code>.{breakpoint.abbr}align-items-end</code></li>
+      <li><code>.{breakpoint.abbr}align-items-center</code></li>
+      <li><code>.{breakpoint.abbr}align-items-baseline</code></li>
+      <li><code>.{breakpoint.abbr}align-items-stretch</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/align-self.mdx b/site/src/content/docs/utilities/align-self.mdx
index d0114652d74b4d1c9e59da7c5e2bdc497fa66939..dd96135449f7e0cc2f8d5a5acd51de68a52f5762 100644 (file)
--- a/site/src/content/docs/utilities/align-self.mdx
+++ b/site/src/content/docs/utilities/align-self.mdx
@@ -59,11 +59,11 @@ Responsive variations also exist for `align-self`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.align-self{breakpoint.abbr}-start</code></li>
-      <li><code>.align-self{breakpoint.abbr}-end</code></li>
-      <li><code>.align-self{breakpoint.abbr}-center</code></li>
-      <li><code>.align-self{breakpoint.abbr}-baseline</code></li>
-      <li><code>.align-self{breakpoint.abbr}-stretch</code></li>
+      <li><code>.{breakpoint.abbr}align-self-start</code></li>
+      <li><code>.{breakpoint.abbr}align-self-end</code></li>
+      <li><code>.{breakpoint.abbr}align-self-center</code></li>
+      <li><code>.{breakpoint.abbr}align-self-baseline</code></li>
+      <li><code>.{breakpoint.abbr}align-self-stretch</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/flex.mdx b/site/src/content/docs/utilities/flex.mdx
index 1d16019bd06b67a631a4408f7ce573d209297a3f..5cd51e2f9c78cef990132137a06cbd84f424da17 100644 (file)
--- a/site/src/content/docs/utilities/flex.mdx
+++ b/site/src/content/docs/utilities/flex.mdx
@@ -31,8 +31,8 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.d{breakpoint.abbr}-flex</code></li>
-      <li><code>.d{breakpoint.abbr}-inline-flex</code></li>
+      <li><code>.{breakpoint.abbr}d-flex</code></li>
+      <li><code>.{breakpoint.abbr}d-inline-flex</code></li>
     </Fragment>
   )
 })}
@@ -73,10 +73,10 @@ Responsive variations also exist for `flex-direction`.
 <ul>
 {getSequence(0, 5).map((i) => (
   <Fragment>
-    <li><code>.flex{getData('breakpoints')[i].abbr}-row</code></li>
-    <li><code>.flex{getData('breakpoints')[i].abbr}-row-reverse</code></li>
-    <li><code>.flex{getData('breakpoints')[i].abbr}-column</code></li>
-    <li><code>.flex{getData('breakpoints')[i].abbr}-column-reverse</code></li>
+    <li><code>.{getData('breakpoints')[i].abbr}flex-row</code></li>
+    <li><code>.{getData('breakpoints')[i].abbr}flex-row-reverse</code></li>
+    <li><code>.{getData('breakpoints')[i].abbr}flex-column</code></li>
+    <li><code>.{getData('breakpoints')[i].abbr}flex-column-reverse</code></li>
   </Fragment>
 ))}
 </ul>
@@ -96,7 +96,7 @@ Responsive variations also exist for `flex-fill`.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.flex{breakpoint.abbr}-fill</code></li>
+    <li><code>.{breakpoint.abbr}flex-fill</code></li>
   )
 })}
 </ul>
@@ -124,10 +124,10 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.flex{breakpoint.abbr}-grow-0</code></li>
-      <li><code>.flex{breakpoint.abbr}-grow-1</code></li>
-      <li><code>.flex{breakpoint.abbr}-shrink-0</code></li>
-      <li><code>.flex{breakpoint.abbr}-shrink-1</code></li>
+      <li><code>.{breakpoint.abbr}flex-grow-0</code></li>
+      <li><code>.{breakpoint.abbr}flex-grow-1</code></li>
+      <li><code>.{breakpoint.abbr}flex-shrink-0</code></li>
+      <li><code>.{breakpoint.abbr}flex-shrink-1</code></li>
     </Fragment>
   )
 })}
@@ -209,9 +209,9 @@ Responsive variations also exist for `flex-wrap`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.flex{breakpoint.abbr}-nowrap</code></li>
-      <li><code>.flex{breakpoint.abbr}-wrap</code></li>
-      <li><code>.flex{breakpoint.abbr}-wrap-reverse</code></li>
+      <li><code>.{breakpoint.abbr}flex-nowrap</code></li>
+      <li><code>.{breakpoint.abbr}flex-wrap</code></li>
+      <li><code>.{breakpoint.abbr}flex-wrap-reverse</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/float.mdx b/site/src/content/docs/utilities/float.mdx
index 06881c1c7dc207a4b51dec194f149bc7e0bbde06..dcbcc905124c677a1ace34aa494aeafcf2c2cdfa 100644 (file)
--- a/site/src/content/docs/utilities/float.mdx
+++ b/site/src/content/docs/utilities/float.mdx
@@ -34,9 +34,9 @@ Here are all the support classes:
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.float{breakpoint.abbr}-start</code></li>
-      <li><code>.float{breakpoint.abbr}-end</code></li>
-      <li><code>.float{breakpoint.abbr}-none</code></li>
+      <li><code>.{breakpoint.abbr}float-start</code></li>
+      <li><code>.{breakpoint.abbr}float-end</code></li>
+      <li><code>.{breakpoint.abbr}float-none</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/gap.mdx b/site/src/content/docs/utilities/gap.mdx
index 8c7435baba2293ea67aa8ccf16777d3554ecfa3f..aac5b7dad3b91fec297c0ce1b20d41b2c472446f 100644 (file)
--- a/site/src/content/docs/utilities/gap.mdx
+++ b/site/src/content/docs/utilities/gap.mdx
@@ -38,7 +38,7 @@ Use gap utilities to control the space between children in flexbox and grid layo
 
 Gap utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}-{size}` for `xs` and `{property}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
+The classes are named using the format `{property}-{size}` for `xs` and `{breakpoint}:{property}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
 
 Where *property* is one of:
 
@@ -154,7 +154,7 @@ All gap utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.gap{breakpoint.abbr}-0</code> through <code>.gap{breakpoint.abbr}-5</code></li>
+    <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-5</code></li>
   )
 })}
 </ul>
@@ -162,7 +162,7 @@ All gap utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.row-gap{breakpoint.abbr}-0</code> through <code>.row-gap{breakpoint.abbr}-5</code></li>
+    <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-5</code></li>
   )
 })}
 </ul>
@@ -170,7 +170,7 @@ All gap utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.column-gap{breakpoint.abbr}-0</code> through <code>.column-gap{breakpoint.abbr}-5</code></li>
+    <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-5</code></li>
   )
 })}
 </ul>

diff --git a/site/src/content/docs/utilities/grid.mdx b/site/src/content/docs/utilities/grid.mdx
index 12f6532b3108d1172c290c36ac126f7c7b94ae24..3dad24d28aecef9620a890756ada85f09c78affc 100644 (file)
--- a/site/src/content/docs/utilities/grid.mdx
+++ b/site/src/content/docs/utilities/grid.mdx
@@ -154,10 +154,10 @@ All grid utilities are responsive and include all breakpoints.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.grid-cols{breakpoint.abbr}-3</code></li>
-      <li><code>.grid-cols{breakpoint.abbr}-4</code></li>
-      <li><code>.grid-cols{breakpoint.abbr}-6</code></li>
-      <li><code>.grid-cols{breakpoint.abbr}-fill</code></li>
+      <li><code>.{breakpoint.abbr}grid-cols-3</code></li>
+      <li><code>.{breakpoint.abbr}grid-cols-4</code></li>
+      <li><code>.{breakpoint.abbr}grid-cols-6</code></li>
+      <li><code>.{breakpoint.abbr}grid-cols-fill</code></li>
     </Fragment>
   )
 })}
@@ -169,9 +169,9 @@ All grid utilities are responsive and include all breakpoints.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.grid-auto-flow{breakpoint.abbr}-row</code></li>
-      <li><code>.grid-auto-flow{breakpoint.abbr}-column</code></li>
-      <li><code>.grid-auto-flow{breakpoint.abbr}-dense</code></li>
+      <li><code>.{breakpoint.abbr}grid-auto-flow-row</code></li>
+      <li><code>.{breakpoint.abbr}grid-auto-flow-column</code></li>
+      <li><code>.{breakpoint.abbr}grid-auto-flow-dense</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/justify-content.mdx b/site/src/content/docs/utilities/justify-content.mdx
index 031903bb53b94b2e0c6f6f78c7b601f90c29f58b..b600b49fa497b30b1fc86e860190795bae5e3442 100644 (file)
--- a/site/src/content/docs/utilities/justify-content.mdx
+++ b/site/src/content/docs/utilities/justify-content.mdx
@@ -65,12 +65,12 @@ Responsive variations also exist for `justify-content`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.justify-content{breakpoint.abbr}-start</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-end</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-center</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-between</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-around</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-evenly</code></li>
+      <li><code>.{breakpoint.abbr}justify-content-start</code></li>
+      <li><code>.{breakpoint.abbr}justify-content-end</code></li>
+      <li><code>.{breakpoint.abbr}justify-content-center</code></li>
+      <li><code>.{breakpoint.abbr}justify-content-between</code></li>
+      <li><code>.{breakpoint.abbr}justify-content-around</code></li>
+      <li><code>.{breakpoint.abbr}justify-content-evenly</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/justify-items.mdx b/site/src/content/docs/utilities/justify-items.mdx
index ce6e46fde0a112dda32cc9989d22d10ec811b2a4..74a724f0903e736171e0eb7d80f65828d9d0e69b 100644 (file)
--- a/site/src/content/docs/utilities/justify-items.mdx
+++ b/site/src/content/docs/utilities/justify-items.mdx
@@ -55,10 +55,10 @@ Responsive variations also exist for `justify-items`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.justify-items{breakpoint.abbr}-start</code></li>
-      <li><code>.justify-items{breakpoint.abbr}-end</code></li>
-      <li><code>.justify-items{breakpoint.abbr}-center</code></li>
-      <li><code>.justify-items{breakpoint.abbr}-stretch</code></li>
+      <li><code>.{breakpoint.abbr}justify-items-start</code></li>
+      <li><code>.{breakpoint.abbr}justify-items-end</code></li>
+      <li><code>.{breakpoint.abbr}justify-items-center</code></li>
+      <li><code>.{breakpoint.abbr}justify-items-stretch</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/margin.mdx b/site/src/content/docs/utilities/margin.mdx
index 632836aa696c7c2ba0592550ba6d513be04e6997..5be011b7b15ab024caa938d7842089797b30e7c4 100644 (file)
--- a/site/src/content/docs/utilities/margin.mdx
+++ b/site/src/content/docs/utilities/margin.mdx
@@ -44,7 +44,7 @@ Use margin utilities to control the outer space around elements. Margin utilitie
 
 Margin utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{breakpoint}:{property}{sides}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
 
 Where *property* is:
 
@@ -185,7 +185,7 @@ All margin utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.m{breakpoint.abbr}-0</code> through <code>.m{breakpoint.abbr}-5</code> and <code>.m{breakpoint.abbr}-auto</code></li>
+    <li><code>.{breakpoint.abbr}m-0</code> through <code>.{breakpoint.abbr}m-5</code> and <code>.{breakpoint.abbr}m-auto</code></li>
   )
 })}
 </ul>

diff --git a/site/src/content/docs/utilities/padding.mdx b/site/src/content/docs/utilities/padding.mdx
index bda866ac88d1388fc2818f5b283e96f4517cf8d4..d63b8be7de83a1bcdc814cd287890c710c606979 100644 (file)
--- a/site/src/content/docs/utilities/padding.mdx
+++ b/site/src/content/docs/utilities/padding.mdx
@@ -40,7 +40,7 @@ Use padding utilities to control the inner space within elements. Padding utilit
 
 Padding utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{breakpoint}:{property}{sides}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
 
 Where *property* is:
 
@@ -151,7 +151,7 @@ All padding utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.p{breakpoint.abbr}-0</code> through <code>.p{breakpoint.abbr}-5</code></li>
+    <li><code>.{breakpoint.abbr}p-0</code> through <code>.{breakpoint.abbr}p-5</code></li>
   )
 })}
 </ul>

diff --git a/site/src/content/docs/utilities/place-items.mdx b/site/src/content/docs/utilities/place-items.mdx
index 6ac63db905fb14f577c8535b1c98a1219b8d6032..98bb2613dde07c2814ff1c1ce0b15d0c89b9f964 100644 (file)
--- a/site/src/content/docs/utilities/place-items.mdx
+++ b/site/src/content/docs/utilities/place-items.mdx
@@ -55,10 +55,10 @@ Responsive variations also exist for `place-items`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.place-items{breakpoint.abbr}-start</code></li>
-      <li><code>.place-items{breakpoint.abbr}-end</code></li>
-      <li><code>.place-items{breakpoint.abbr}-center</code></li>
-      <li><code>.place-items{breakpoint.abbr}-stretch</code></li>
+      <li><code>.{breakpoint.abbr}place-items-start</code></li>
+      <li><code>.{breakpoint.abbr}place-items-end</code></li>
+      <li><code>.{breakpoint.abbr}place-items-center</code></li>
+      <li><code>.{breakpoint.abbr}place-items-stretch</code></li>
     </Fragment>
   )
 })}

diff --git a/site/src/content/docs/utilities/text-alignment.mdx b/site/src/content/docs/utilities/text-alignment.mdx
index b19869754c82ad101c2b1fe4cbb4306b087ff07b..b2aa96d5c69c0599f7a753adc8dc31a8f8f835f7 100644 (file)
--- a/site/src/content/docs/utilities/text-alignment.mdx
+++ b/site/src/content/docs/utilities/text-alignment.mdx
@@ -35,9 +35,9 @@ Responsive variations also exist for `text-align`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.text{breakpoint.abbr}-start</code></li>
-      <li><code>.text{breakpoint.abbr}-center</code></li>
-      <li><code>.text{breakpoint.abbr}-end</code></li>
+      <li><code>.{breakpoint.abbr}text-start</code></li>
+      <li><code>.{breakpoint.abbr}text-center</code></li>
+      <li><code>.{breakpoint.abbr}text-end</code></li>
     </Fragment>
   )
 })}