New grid gap, tweak form layouts in docs

diff --git a/scss/_config.scss b/scss/_config.scss
index be0b7c9297d4ec8d7ac1cb2d4226db66ca847f4e..f20bf12425e3663f582d871c98f55e2ef3d8b695 100644 (file)
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -50,7 +50,7 @@ $breakpoints: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
+$grid-gutter-width: 1.25rem !default;
 $grid-row-columns: 6 !default;
 
 // Grid containers

diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index 89a5e1ff5a1a33f9e0a6a066b973d47e25dd0539..57ecf426227218d5d15a1114af49d59fb6cd6c73 100644 (file)
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -69,11 +69,14 @@
   }
 
   // mdo-do: add to utilities?
-  .g-col-auto {
+  .col-auto {
     grid-column: auto/auto;
   }
 
   // mdo-do: add to utilities?
+  .grid-cols-2 {
+    --#{$prefix}columns: 2;
+  }
   .grid-cols-3 {
     --#{$prefix}columns: 3;
   }

diff --git a/site/src/content/docs/forms/layout.mdx b/site/src/content/docs/forms/layout.mdx
index 04d3bd5a8b58dfe67f07e65c32d1dc937811f3e8..e70c2e039edcef1402365106d750efbc16c8d4de 100644 (file)
--- a/site/src/content/docs/forms/layout.mdx
+++ b/site/src/content/docs/forms/layout.mdx
@@ -30,36 +30,70 @@ Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or
 
 ## Form grid
 
-More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
+More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
 
-<Example code={`<div class="row">
-    <div class="col">
-      <input type="text" class="form-control" placeholder="First name" aria-label="First name">
-    </div>
-    <div class="col">
-      <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
-    </div>
-  </div>`} />
+<Example code={`<div class="grid grid-cols-2">
+  <div class="col">
+    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
+  </div>
+  <div class="col">
+    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
+  </div>
+</div>`} />
 
 ## Gutters
 
-By adding [gutter modifier classes]([[docsref:/layout/gutters]]), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
+By adding [gutter modifier classes]([[docsref:/layout/gutters]]), you can have control over the gutter width in as well the inline as block direction.
 
-<Example code={`<div class="row g-3">
-    <div class="col">
-      <input type="text" class="form-control" placeholder="First name" aria-label="First name">
-    </div>
-    <div class="col">
-      <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
-    </div>
-  </div>`} />
+<Example code={`<div class="grid grid-cols-2 gap-3">
+  <div class="col">
+    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
+  </div>
+  <div class="col">
+    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
+  </div>
+</div>`} />
 
 More complex layouts can also be created with the grid system.
 
-<Example code={`<form class="row g-3">
-    <div class="col-md-6">
-      <label for="inputEmail4" class="form-label">Email</label>
-      <input type="email" class="form-control" id="inputEmail4">
+<Example code={`<form class="grid">
+  <div class="col-md-6">
+    <label for="inputEmail4" class="form-label">Email</label>
+    <input type="email" class="form-control" id="inputEmail4">
+  </div>
+  <div class="col-md-6">
+    <label for="inputPassword4" class="form-label">Password</label>
+    <input type="password" class="form-control" id="inputPassword4">
+  </div>
+  <div class="col-12">
+    <label for="inputAddress" class="form-label">Address</label>
+    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+  </div>
+  <div class="col-12">
+    <label for="inputAddress2" class="form-label">Address 2</label>
+    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+  </div>
+  <div class="col-md-6">
+    <label for="inputCity" class="form-label">City</label>
+    <input type="text" class="form-control" id="inputCity">
+  </div>
+  <div class="col-md-4">
+    <label for="inputState" class="form-label">State</label>
+    <select id="inputState" class="form-select">
+      <option selected>Choose...</option>
+      <option>...</option>
+    </select>
+  </div>
+  <div class="col-md-2">
+    <label for="inputZip" class="form-label">Zip</label>
+    <input type="text" class="form-control" id="inputZip">
+  </div>
+  <div class="col-12">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" id="gridCheck">
+      <label class="form-check-label" for="gridCheck">
+        Check me out
+      </label>
     </div>
     <div class="col-md-6">
       <label for="inputPassword4" class="form-label">Password</label>
@@ -108,16 +142,48 @@ Create horizontal forms with the grid by adding the `.row` class to form groups
 At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
 
 <Example code={`<form>
-    <div class="row mb-3">
-      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
-      <div class="col-sm-10">
-        <input type="email" class="form-control" id="inputEmail3">
+  <div class="grid mb-3">
+    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
+    <div class="col-sm-10">
+      <input type="email" class="form-control" id="inputEmail3">
+    </div>
+  </div>
+  <div class="grid mb-3">
+    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
+    <div class="col-sm-10">
+      <input type="password" class="form-control" id="inputPassword3">
+    </div>
+  </div>
+  <fieldset class="grid mb-3">
+    <legend class="col-sm-2 col-form-label pt-0">Radios</legend>
+    <div class="col-sm-10">
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
+        <label class="form-check-label" for="gridRadios1">
+          First radio
+        </label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
+        <label class="form-check-label" for="gridRadios2">
+          Second radio
+        </label>
+      </div>
+      <div class="form-check disabled">
+        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
+        <label class="form-check-label" for="gridRadios3">
+          Third disabled radio
+        </label>
       </div>
     </div>
-    <div class="row mb-3">
-      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
-      <div class="col-sm-10">
-        <input type="password" class="form-control" id="inputPassword3">
+  </fieldset>
+  <div class="grid mb-3">
+    <div class="col-sm-10 col-start-md-3">
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="gridCheck1">
+        <label class="form-check-label" for="gridCheck1">
+          Example checkbox
+        </label>
       </div>
     </div>
     <fieldset class="row mb-3">
@@ -160,49 +226,55 @@ At times, you maybe need to use margin or padding utilities to create that perfe
 
 Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
 
-<Example code={`<div class="row mb-3">
-    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
-    <div class="col-sm-10">
-      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
-    </div>
+<Example code={`<div class="grid mb-3">
+  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
+  <div class="col-sm-10">
+    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
   </div>
-  <div class="row mb-3">
-    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
-    <div class="col-sm-10">
-      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
-    </div>
+</div>
+<div class="grid mb-3">
+  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
+  <div class="col-sm-10">
+    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
   </div>
-  <div class="row">
-    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
-    <div class="col-sm-10">
-      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
-    </div>
-  </div>`} />
+</div>
+<div class="grid mb-3">
+  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
+  <div class="col-sm-10">
+    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
+  </div>
+</div>`} />
 
 ## Column sizing
 
-As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-7`.
+As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-8`.
 
-<Example code={`<div class="row g-3">
-    <div class="col-sm-7">
-      <input type="text" class="form-control" placeholder="City" aria-label="City">
-    </div>
-    <div class="col-sm">
-      <input type="text" class="form-control" placeholder="State" aria-label="State">
-    </div>
-    <div class="col-sm">
-      <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
-    </div>
-  </div>`} />
+<Example code={`<div class="grid">
+  <div class="col-sm-8">
+    <input type="text" class="form-control" placeholder="City" aria-label="City">
+  </div>
+  <div class="col-sm-2">
+    <input type="text" class="form-control" placeholder="State" aria-label="State">
+  </div>
+  <div class="col-sm-2">
+    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
+  </div>
+</div>`} />
 
 ## Auto-sizing
 
 The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
 
-<Example code={`<form class="row gy-2 gx-3 align-items-center">
-    <div class="col-auto">
-      <label class="visually-hidden" for="autoSizingInput">Name</label>
-      <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
+<Example code={`<form class="d-flex gap-3 align-items-center">
+  <div class="col-auto">
+    <label class="visually-hidden" for="autoSizingInput">Name</label>
+    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
+  </div>
+  <div class="col-auto">
+    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
+    <div class="input-group">
+      <div class="input-group-text">@</div>
+      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
     </div>
     <div class="col-auto">
       <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
@@ -235,10 +307,16 @@ The example below uses a flexbox utility to vertically center the contents and c
 
 You can then remix that once again with size-specific column classes.
 
-<Example code={`<form class="row gx-3 gy-2 align-items-center">
-    <div class="col-sm-3">
-      <label class="visually-hidden" for="specificSizeInputName">Name</label>
-      <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
+<Example code={`<form class="d-flex gap-3 align-items-center">
+  <div class="col-sm-3">
+    <label class="visually-hidden" for="specificSizeInputName">Name</label>
+    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
+  </div>
+  <div class="col-sm-3">
+    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
+    <div class="input-group">
+      <div class="input-group-text">@</div>
+      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
     </div>
     <div class="col-sm-3">
       <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>