diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro index 7bfd41417c..30c22c9f34 100644 --- a/site/src/components/shortcodes/Example.astro +++ b/site/src/components/shortcodes/Example.astro @@ -80,7 +80,7 @@ const simplifiedMarkup = markup showMarkup && ( <> {showPreview && ( -
+
{lang}
-
+
Dangerous heading
-
+
Changing border color and width
`} /> @@ -78,7 +136,7 @@ Consider our default `.border-success` utility. } ``` -We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency. +We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency. ### Example @@ -90,63 +148,56 @@ To change that opacity, override `--bs-border-opacity` via custom styles or inli Or, choose from any of the `.border-opacity` utilities: This is default success border
-
This is 75% opacity success border
-
This is 50% opacity success border
-
This is 25% opacity success border
-
This is 10% opacity success border
`} /> +
This is 90% opacity success border
+
This is 70% opacity success border
+
This is 60% opacity success border
+
This is 80% opacity success border
+
This is 40% opacity success border
+
This is 50% opacity success border
+
This is 30% opacity success border
+
This is 20% opacity success border
+
This is 10% opacity success border
`} /> ## Width - - - - -`} /> + + + + + +`} /> -## Radius +## Between -Add classes to an element to easily round its corners. +Use the `.dividers-x` and `.dividers-y` utilities to add borders between items. You can also mix and match color width utilities here. - - - - -`} /> + +
First item
+
Second item
+
Third item
+
`} /> -### Sizes - -Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API. - - - - - - - - -`} /> - - - - - -`} /> + +
First item
+
Second item
+
Third item
+
`} /> ## CSS ### Variables - +{/* */} ### Sass variables - +{/* */} Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode: - +{/* - + */} ### Sass maps @@ -160,4 +211,4 @@ Color mode adaptive border colors are also available as a Sass map: 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/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index d761006a12..0b5443c7cd 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -6,26 +6,64 @@ mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/color --- import { getData } from '@libs/data' +import RefTable from '@components/shortcodes/RefTable.astro' ## Reference - -| Class | Styles | -| --- | --- | -| `.color-primary` | `color: var(--bs-primary);` | -| `.color-secondary` | `color: var(--bs-secondary);` | -| `.color-success` | `color: var(--bs-success);` | -| `.color-danger` | `color: var(--bs-danger);` | -| `.color-warning` | `color: var(--bs-warning);` | -| `.color-info` | `color: var(--bs-info);` | -| `.color-fg` | `color: var(--bs-fg);` | -| `.color-fg-1` | `color: var(--bs-fg-1);` | -| `.color-fg-2` | `color: var(--bs-fg-2);` | -| `.color-fg-3` | `color: var(--bs-fg-3);` | -| `.color-white` | `color: var(--bs-white);` | -| `.color-black` | `color: var(--bs-black);` | -| `.color-inherit` | `color: inherit;` | - + ## Colors @@ -103,7 +141,7 @@ As mentioned above, this works by combining the power of multiple utilities and ## Specificity -Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a `
` or more semantic element with the desired class. +Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` or more semantic element with the desired class. ## CSS @@ -141,7 +179,7 @@ RGB colors are generated from a separate Sass map: {/* */} -Color opacities build on that with their own map that’s consumed by the utilities API: +Color opacities build on that with their own map that's consumed by the utilities API: {/* */} diff --git a/site/src/content/docs/utilities/display.mdx b/site/src/content/docs/utilities/display.mdx index 3ac29d1e97..0327ee2c42 100644 --- a/site/src/content/docs/utilities/display.mdx +++ b/site/src/content/docs/utilities/display.mdx @@ -5,6 +5,55 @@ toc: true mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/display --- +## Reference + + + ## How it works Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need. @@ -42,8 +91,8 @@ The media queries affect screen widths with the given breakpoint *or larger*. Fo We've removed the clearfix helper class in v6 as it's outdated and no longer needed. Instead, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix hack. -
Floated element
-
`} /> +
Floated element
+
`} /> ## Examples diff --git a/site/src/content/docs/utilities/flex.mdx b/site/src/content/docs/utilities/flex.mdx index 9d027987a9..115c4ffcde 100644 --- a/site/src/content/docs/utilities/flex.mdx +++ b/site/src/content/docs/utilities/flex.mdx @@ -9,6 +9,187 @@ csstricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ import { getData } from '@libs/data' import { getSequence } from '@libs/utils' +## Reference + + + **Need some quick flexbox layouts?** Consider using [our Stacks helpers]([[docsref:/helpers/stacks]]) that combine common flexbox properties for quick layouts. @@ -21,19 +202,6 @@ Apply `display` utilities to create a flexbox container and transform **direct c I'm an inline flexbox container!
`} /> -Responsive variations also exist for `.d-flex` and `.d-inline-flex`. - - - ## Direction Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). @@ -64,21 +232,6 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
Flex item 3
`} /> -Responsive variations also exist for `flex-direction`. - - - ## Justify content Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`. @@ -125,23 +278,6 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
...
``` -Responsive variations also exist for `justify-content`. - - - ## Align items Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default). @@ -182,22 +318,6 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
``` -Responsive variations also exist for `align-items`. - - - ## Align self Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default). @@ -238,22 +358,6 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
``` -Responsive variations also exist for `align-self`. - - - ## Fill Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space. @@ -264,16 +368,6 @@ Use the `.flex-fill` class on a series of sibling elements to force them into wi
Flex item
`} /> -Responsive variations also exist for `flex-fill`. - - - ## Grow and shrink Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space. @@ -291,19 +385,6 @@ Use `.flex-shrink-*` utilities to toggle a flex item’s ability to shrink if ne
Flex item
`} /> -Responsive variations also exist for `flex-grow` and `flex-shrink`. - - - ## Auto margins Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`). @@ -412,20 +493,6 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( ``` -Responsive variations also exist for `flex-wrap`. - - - ## Order Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed. @@ -436,16 +503,6 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
Third flex item
`} /> -Responsive variations also exist for `order`. - - - Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.