From 7b83e0b704401408aaf48809b25088fbadb6715a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 23 Oct 2024 15:37:31 +0200 Subject: [PATCH] Minor modification in Breakpoint md --- site/content/docs/0.0/layout/breakpoints.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) 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.