diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md index 6890a027ec..3f67bf6254 100644 --- a/site/content/docs/0.0/layout/breakpoints.md +++ b/site/content/docs/0.0/layout/breakpoints.md @@ -36,14 +36,6 @@ OUDS Web includes eight default breakpoints, sometimes referred to as _grid tier | 3x-large | `3xl` | ≥1880px | {{< /bs-table >}} -Breakpoints are representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. - -These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet. - -{{< 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 CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). - {{< bootstrap-compatibility >}} Includes support for xxl breakpoint, defined like 2xl. @@ -56,6 +48,14 @@ Includes support for xxl breakpoint, defined like 2xl. {{< /bootstrap-compatibility >}} +Breakpoints are representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. + +These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet. + +{{< 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 CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). + ## Media queries Since OUDS Web is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.