diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md index b6e78ea428..d634ce2d12 100644 --- a/site/content/docs/5.3/components/alerts.md +++ b/site/content/docs/5.3/components/alerts.md @@ -11,7 +11,7 @@ toc: true Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). {{< callout info >}} -**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop). +**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops). {{< /callout >}} {{< example >}} @@ -158,7 +158,7 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} -### Sass mixin +### Sass mixins {{< deprecated-in "5.3.0" >}} @@ -166,7 +166,7 @@ Used in combination with `$theme-colors` to create contextual modifier classes f {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} -### Sass loop +### Sass loops Loop that generates the modifier classes with the `alert-variant()` mixin. diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 2a0d22f865..6c22809f96 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -157,7 +157,7 @@ Add `.list-group-horizontal` to change the layout of list group items from verti ## Variants {{< callout info >}} -**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop). +**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops). {{< /callout >}} Use contextual classes to style list items with a stateful background and color. @@ -325,7 +325,7 @@ Used in combination with `$theme-colors` to generate the [contextual variant cla {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}} -### Sass loop +### Sass loops Loop that generates the modifier classes with an overriding of CSS variables. diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index 55272b33f6..10beb9bca8 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -769,7 +769,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} -### Sass loop +### Sass loops [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md index a150f8653e..32813486ed 100644 --- a/site/content/docs/5.3/components/navbar.md +++ b/site/content/docs/5.3/components/navbar.md @@ -810,7 +810,7 @@ Variables for the [dark navbar](#color-schemes): {{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}} -### Sass loop +### Sass loops [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index 3e393fda1f..ba83b43cd3 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -829,7 +829,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} -### Sass loop +### Sass loops {{< scss-docs name="table-loop" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 2f1b774cb6..a9970767da 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -203,7 +203,7 @@ CSS variables for our dark color mode are partially generated from dark mode spe {{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}} -### Sass mixin +### Sass mixins Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details. diff --git a/site/content/docs/5.3/customize/components.md b/site/content/docs/5.3/customize/components.md index b512a9036b..262c8d8c69 100644 --- a/site/content/docs/5.3/customize/components.md +++ b/site/content/docs/5.3/customize/components.md @@ -34,7 +34,7 @@ Should you modify your `$grid-breakpoints`, your changes will apply to all the l {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} -For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}). +For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). ## Creating your own diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md index 5eb18f0257..c66bbaf87c 100644 --- a/site/content/docs/5.3/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -371,11 +371,11 @@ These variables are also color mode adaptive, meaning they change color while in ### Sass mixins -Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles. +Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} -### Sass map +### Sass maps This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. @@ -383,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. -### Sass loop +### Sass loops Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md index 5f6e770734..fa36bf8ce0 100644 --- a/site/content/docs/5.3/helpers/focus-ring.md +++ b/site/content/docs/5.3/helpers/focus-ring.md @@ -45,13 +45,13 @@ By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus {{< /example >}} -### Sass +### Sass variables Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. {{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} -### Utilities +### Sass utilities API In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support. diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index 9a0bffcd20..ec63c5b8c8 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -70,13 +70,13 @@ Customize the color by overriding the `--bs-link-*` CSS variable: {{< /example >}} -### Sass +### Sass variables Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. {{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}} -### Utilities +### Sass utilities API Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. diff --git a/site/content/docs/5.3/helpers/ratio.md b/site/content/docs/5.3/helpers/ratio.md index 771bc07cb9..04b6eefead 100644 --- a/site/content/docs/5.3/helpers/ratio.md +++ b/site/content/docs/5.3/helpers/ratio.md @@ -74,7 +74,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T {{< /example >}} -## Sass map +## Sass maps Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use. diff --git a/site/content/docs/5.3/layout/breakpoints.md b/site/content/docs/5.3/layout/breakpoints.md index 8e3df157e8..1667fd9d11 100644 --- a/site/content/docs/5.3/layout/breakpoints.md +++ b/site/content/docs/5.3/layout/breakpoints.md @@ -37,7 +37,7 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} -For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}). +For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). ## Media queries diff --git a/site/content/docs/5.3/layout/containers.md b/site/content/docs/5.3/layout/containers.md index 7d38b72e54..e0e8d9aad0 100644 --- a/site/content/docs/5.3/layout/containers.md +++ b/site/content/docs/5.3/layout/containers.md @@ -64,12 +64,18 @@ Use `.container-fluid` for a full width container, spanning the entire width of ``` -## Sass +## CSS + +### Sass variables As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them: {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}} +For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). + +### Sass mixins + In addition to customizing the Sass, you can also create your own containers with our Sass mixin. ```scss @@ -87,5 +93,3 @@ In addition to customizing the Sass, you can also create your own containers wit @include make-container(); } ``` - -For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}). diff --git a/site/content/docs/5.3/layout/grid.md b/site/content/docs/5.3/layout/grid.md index 8e4d10a3cf..1783410f98 100644 --- a/site/content/docs/5.3/layout/grid.md +++ b/site/content/docs/5.3/layout/grid.md @@ -46,7 +46,7 @@ Breaking it down, here's how the grid system comes together: - **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters. -- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. +- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 11ca89a4a0..19270b1cce 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -148,13 +148,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Alert variants are now styled via CSS variables. -- Deprecated The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant. +- Deprecated The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### List group - List group item variants are now styled via CSS variables. -- Deprecated The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant. +- Deprecated The `.list-group-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### Dropdowns diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index eea5532919..c17ed84706 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -143,7 +143,7 @@ Color mode background colors are also available as a Sass map: {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}} -## Utilities API +### Sass utilities API Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index fe33cac486..b4fa2f4138 100644 --- a/site/content/docs/5.3/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -185,7 +185,7 @@ Color mode adaptive border colors are also available as a Sass map: {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} -### Utilities API +### Sass utilities API Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md index e132a2f113..775457d9aa 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -134,7 +134,7 @@ Color mode adaptive text colors are also available as a Sass map: {{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}} -### Utilities API +### Sass utilities API Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/display.md b/site/content/docs/5.3/utilities/display.md index dc5a497bfa..41541b96f9 100644 --- a/site/content/docs/5.3/utilities/display.md +++ b/site/content/docs/5.3/utilities/display.md @@ -105,9 +105,9 @@ The print and display classes can be combined.
Hide up to large on screen, but always show on print
{{< /example >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md index 564c39f86c..d0a92e5b55 100644 --- a/site/content/docs/5.3/utilities/flex.md +++ b/site/content/docs/5.3/utilities/flex.md @@ -655,9 +655,9 @@ And say you want to vertically center the content next to the image: {{< /example >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/float.md b/site/content/docs/5.3/utilities/float.md index a18c21471c..a8d3efba86 100644 --- a/site/content/docs/5.3/utilities/float.md +++ b/site/content/docs/5.3/utilities/float.md @@ -39,9 +39,9 @@ Here are all the support classes: {{< /float.inline >}} {{< /markdown >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/interactions.md b/site/content/docs/5.3/utilities/interactions.md index 0e8ea001fd..d602850d1a 100644 --- a/site/content/docs/5.3/utilities/interactions.md +++ b/site/content/docs/5.3/utilities/interactions.md @@ -33,9 +33,9 @@ If possible, the simpler solution is: - For form controls, add the `disabled` HTML attribute. - For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link. -## Sass +## CSS -### Utilities API +### Sass utilities API Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md index 1b8eaa1ef3..668af8c237 100644 --- a/site/content/docs/5.3/utilities/link.md +++ b/site/content/docs/5.3/utilities/link.md @@ -94,11 +94,11 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} -## Sass +## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -### Utilities API +### Sass utilities API Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md index debd495e8e..babc70a697 100644 --- a/site/content/docs/5.3/utilities/object-fit.md +++ b/site/content/docs/5.3/utilities/object-fit.md @@ -54,7 +54,9 @@ The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` util ``` -## Utilities API +## CSS + +### Sass utilities API Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/opacity.md b/site/content/docs/5.3/utilities/opacity.md index 5cc4c225fa..5d253a77ca 100644 --- a/site/content/docs/5.3/utilities/opacity.md +++ b/site/content/docs/5.3/utilities/opacity.md @@ -24,7 +24,9 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
...
``` -### Utilities API +## CSS + +### Sass utilities API Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/overflow.md b/site/content/docs/5.3/utilities/overflow.md index c4cb0092c2..9c8573c333 100644 --- a/site/content/docs/5.3/utilities/overflow.md +++ b/site/content/docs/5.3/utilities/overflow.md @@ -90,9 +90,9 @@ Adjust the `overflow-y` property to affect the overflow of content vertically. Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. -## Sass +## CSS -### Utilities API +### Sass utilities API Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/position.md b/site/content/docs/5.3/utilities/position.md index 0ba0dd7695..e7cd420fa0 100644 --- a/site/content/docs/5.3/utilities/position.md +++ b/site/content/docs/5.3/utilities/position.md @@ -115,15 +115,15 @@ You can use these classes with existing components to create new ones. Remember {{< /example >}} -## Sass +## CSS -### Maps +### Sass maps Default position utility values are declared in a Sass map, then used to generate our utilities. {{< scss-docs name="position-map" file="scss/_variables.scss" >}} -### Utilities API +### Sass utilities API Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/shadows.md b/site/content/docs/5.3/utilities/shadows.md index 9872d4519c..94868a1197 100644 --- a/site/content/docs/5.3/utilities/shadows.md +++ b/site/content/docs/5.3/utilities/shadows.md @@ -17,13 +17,13 @@ While shadows on components are disabled by default in Bootstrap and can be enab
Larger shadow
{{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}} -### Utilities API +### Sass utilities API Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/sizing.md b/site/content/docs/5.3/utilities/sizing.md index 3d0f8e81c7..f5881729ef 100644 --- a/site/content/docs/5.3/utilities/sizing.md +++ b/site/content/docs/5.3/utilities/sizing.md @@ -53,9 +53,9 @@ You can also use utilities to set the width and height relative to the viewport.
Height 100vh
``` -## Sass +## CSS -### Utilities API +### Sass utilities API Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md index c7a216c312..2562b8d43e 100644 --- a/site/content/docs/5.3/utilities/spacing.md +++ b/site/content/docs/5.3/utilities/spacing.md @@ -139,15 +139,15 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as {{< /example >}} -## Sass +## CSS -### Maps +### Sass maps Spacing utilities are declared via Sass map and then generated with our utilities API. {{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}} -### Utilities API +### Sass utilities API Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/text.md b/site/content/docs/5.3/utilities/text.md index f7c030da68..5787f95eb3 100644 --- a/site/content/docs/5.3/utilities/text.md +++ b/site/content/docs/5.3/utilities/text.md @@ -153,7 +153,7 @@ Font-size utilities are generated from this map, in combination with our utiliti {{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} -## Utilities API +### Sass utilities API Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/vertical-align.md b/site/content/docs/5.3/utilities/vertical-align.md index 9fe0eeb932..c24e6616fc 100644 --- a/site/content/docs/5.3/utilities/vertical-align.md +++ b/site/content/docs/5.3/utilities/vertical-align.md @@ -39,9 +39,9 @@ With table cells: {{< /example >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/visibility.md b/site/content/docs/5.3/utilities/visibility.md index 61eb302418..e2c6bb6b88 100644 --- a/site/content/docs/5.3/utilities/visibility.md +++ b/site/content/docs/5.3/utilities/visibility.md @@ -28,9 +28,9 @@ Apply `.visible` or `.invisible` as needed. } ``` -## Sass +## CSS -### Utilities API +### Sass utilities API Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/site/content/docs/5.3/utilities/z-index.md b/site/content/docs/5.3/utilities/z-index.md index ca7d8e35a1..64ed84bcec 100644 --- a/site/content/docs/5.3/utilities/z-index.md +++ b/site/content/docs/5.3/utilities/z-index.md @@ -37,13 +37,13 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale ## CSS -### Sass map +### Sass maps Customize this Sass map to change the available values and generated utilities. {{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}} -### Utilities API +### Sass utilities API Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})