From f0acc74cbad1345856667aafe6caeddde1b9a399 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 23 Oct 2024 14:15:17 +0200 Subject: [PATCH] Update `.container` and other stuff --- js/tests/integration/index.html | 2 +- js/tests/unit/dropdown.spec.js | 2 +- js/tests/unit/scrollspy.spec.js | 4 +- js/tests/visual/alert.html | 2 +- js/tests/visual/button.html | 2 +- js/tests/visual/carousel.html | 2 +- js/tests/visual/collapse.html | 2 +- js/tests/visual/dropdown.html | 2 +- js/tests/visual/input.html | 2 +- js/tests/visual/modal.html | 2 +- js/tests/visual/popover.html | 2 +- js/tests/visual/scrollspy.html | 2 +- js/tests/visual/tab.html | 2 +- js/tests/visual/toast.html | 2 +- js/tests/visual/tooltip.html | 2 +- site/content/docs/0.0/helpers/position.md | 16 +-- site/content/docs/0.0/layout/breakpoints.md | 28 ++--- site/content/docs/0.0/layout/columns.md | 36 +++--- site/content/docs/0.0/layout/containers.md | 18 +-- site/content/docs/0.0/layout/grid.md | 129 ++++++++++++++------ site/content/docs/0.0/utilities/float.md | 8 +- site/data/breakpoints.yml | 10 +- 22 files changed, 163 insertions(+), 114 deletions(-) diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 3f2c2198ed..b5dccb6af5 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -11,7 +11,7 @@ Hello, world! -
+

Hello, world!

diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 156005588d..568d7509e4 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -2408,7 +2408,7 @@ describe('Dropdown', () => { it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', () => { return new Promise(resolve => { fixtureEl.innerHTML = [ - '
', + '
', '
', ' ', '
', diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index fc44471c42..0960f974ab 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -222,7 +222,7 @@ describe('ScrollSpy', () => { '
', '
', '
', - '
', + '
', '
    ', '
  • Overview
    • ', '
  • Detail
    • ', @@ -300,7 +300,7 @@ describe('ScrollSpy', () => { '
    ', '
    ', '
    ', - '
    ', + '
    ', '
      ', '
    • Overview
      • ', '
    • Detail
      • ', diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index f2a39ad231..ead99e01a5 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -7,7 +7,7 @@ Alert -
      +

      Alert Bootstrap Visual Test

    -
    +

    @fat

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index b9a5389290..a3acee0cf6 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -12,7 +12,7 @@ -
    +

    Tab Bootstrap Visual Test

    Tabs without fade

    diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index a3f086627b..ec5201d23c 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -14,7 +14,7 @@ -
    +

    Toast Bootstrap Visual Test

    diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 2866f319a1..4e759d54e8 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -17,7 +17,7 @@ -
    +

    Tooltip OUDS Web Visual Test

    Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

    diff --git a/site/content/docs/0.0/helpers/position.md b/site/content/docs/0.0/helpers/position.md index 407e9cc7f3..99599b1bfa 100644 --- a/site/content/docs/0.0/helpers/position.md +++ b/site/content/docs/0.0/helpers/position.md @@ -37,13 +37,13 @@ Position an element at the top of the viewport, from edge to edge, but only afte Responsive variations also exist for `.sticky-top` utility. ```html -
    Stick to the top on viewports sized XS (extra small) or wider
    +
    Stick to the top on viewports sized XS (x-small) or wider
    Stick to the top on viewports sized SM (small) or wider
    Stick to the top on viewports sized MD (medium) or wider
    Stick to the top on viewports sized LG (large) or wider
    -
    Stick to the top on viewports sized XL (extra large) or wider
    -
    Stick to the top on viewports sized 2XL (extra extra large) or wider
    -
    Stick to the top on viewports sized 3XL (extra extra extra large) or wider
    +
    Stick to the top on viewports sized XL (x-large) or wider
    +
    Stick to the top on viewports sized 2XL (2x-large) or wider
    +
    Stick to the top on viewports sized 3XL (3x-large) or wider
    ``` ## Sticky bottom @@ -59,11 +59,11 @@ Position an element at the bottom of the viewport, from edge to edge, but only a Responsive variations also exist for `.sticky-bottom` utility. ```html -
    Stick to the bottom on viewports sized XS (extra small) or wider
    +
    Stick to the bottom on viewports sized XS (x-small) or wider
    Stick to the bottom on viewports sized SM (small) or wider
    Stick to the bottom on viewports sized MD (medium) or wider
    Stick to the bottom on viewports sized LG (large) or wider
    -
    Stick to the bottom on viewports sized XL (extra large) or wider
    -
    Stick to the bottom on viewports sized 2XL (extra extra large) or wider
    -
    Stick to the bottom on viewports sized 3XL (extra extra extra large) or wider
    +
    Stick to the bottom on viewports sized XL (x-large) or wider
    +
    Stick to the bottom on viewports sized 2XL (2x-large) or wider
    +
    Stick to the bottom on viewports sized 3XL (3x-large) or wider
    ``` diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md index b1082eb1b3..6890a027ec 100644 --- a/site/content/docs/0.0/layout/breakpoints.md +++ b/site/content/docs/0.0/layout/breakpoints.md @@ -26,14 +26,14 @@ OUDS Web includes eight default breakpoints, sometimes referred to as _grid tier {{< bs-table "table" >}} | Breakpoint | Class infix | Dimensions | | --- | --- | --- | -| 2X-small | None |<390px | +| 2x-small | None |<390px | | X-small | `xs` | ≥390px | | Small | `sm` | ≥480px | | Medium | `md` | ≥736px | | Large | `lg` | ≥1024px | | X-large | `xl` | ≥1320px | -| 2X-large | `2xl` | ≥1640px | -| 3X-large | `3xl` | ≥1880px | +| 2x-large | `2xl` | ≥1640px | +| 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. @@ -51,7 +51,7 @@ Includes support for xxl breakpoint, defined like 2xl. {{< bs-table "table" >}} | Breakpoint | Class infix | Dimensions | | --- | --- | --- | -| XX-large | `xxl` | ≥1640px | +| Extra extra large | `xxl` | ≥1640px | {{< /bs-table >}} {{< /bootstrap-compatibility >}} @@ -92,10 +92,10 @@ OUDS Web primarily uses the following media query ranges—or breakpoints—in o These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example: ```scss -// 2X-Small devices (portrait phones, less than 390px) +// 2x-small devices (portrait phones, less than 390px) // No media query for `2xs` since this is the default in OUDS Web -// X-Small devices (portrait phones, 390px and up) +// X-small devices (portrait phones, 390px and up) @media (min-width: 390px) { ... } // Small devices (landscape phones, 480px and up) @@ -107,13 +107,13 @@ These Sass mixins translate in our compiled CSS using the values declared in our // Large devices (landscape tablets, 1024px and up) @media (min-width: 1024px) { ... } -// X-Large devices (desktops, 1320px and up) +// X-large devices (desktops, 1320px and up) @media (min-width: 1320px) { ... } -// 2X-Large devices (large desktops, 1640px and up) +// 2x-large devices (large desktops, 1640px and up) @media (min-width: 1640px) { ... } -// 3X-Large devices (larger desktops, TV, 1880px and up) +// 3x-large devices (larger desktops, TV, 1880px and up) @media (min-width: 1880px) { ... } ``` @@ -144,10 +144,10 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us ```scss // `2xs` returns only a ruleset and no media query // ... { ... } -// `xs` applies to 2X-small devices (portrait phones, less than 390px) +// `xs` applies to 2x-small devices (portrait phones, less than 390px) @media (max-width: 389.98px) { ... } -// `sm` applies to X-small devices (portrait phones, less than 480px) +// `sm` applies to x-small devices (portrait phones, less than 480px) @media (max-width: 479.98px) { ... } // `md` applies to small devices (landscape phones, less than 736px) @@ -159,10 +159,10 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us // `xl` applies to large devices (landscape tablets, less than 1320px) @media (max-width: 1319.98px) { ... } -// `2xl` applies to X-large devices (desktops, less than 1640px) +// `2xl` applies to x-large devices (desktops, less than 1640px) @media (max-width: 1639.98px) { ... } -// `3xl` applies to 2X-large devices (large desktops, less than 1880px) +// `3xl` applies to 2x-large devices (large desktops, less than 1880px) @media (max-width: 1879.98px) { ... } ``` @@ -205,6 +205,6 @@ Which results in: ```scss // Example -// Apply styles starting from medium devices and up to extra large devices +// Apply styles starting from medium devices and up to x-large devices @media (min-width: 736px) and (max-width: 1319.98px) { ... } ``` diff --git a/site/content/docs/0.0/layout/columns.md b/site/content/docs/0.0/layout/columns.md index 0d6ef4e0bb..c3e0e4bbaa 100644 --- a/site/content/docs/0.0/layout/columns.md +++ b/site/content/docs/0.0/layout/columns.md @@ -20,13 +20,9 @@ toc: true - **OUDS Web includes predefined classes for creating fast, responsive layouts.** With [eight breakpoints]({{< docsref "/layout/breakpoints" >}}) (2xs, xs, sm, md, xl, 2xl and 3xl) and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish. -- **Don't use columns that are too small for the main grid.** To align with the design system, for the main site grid, you should only use columns in multiples of **3** for smaller breakpoints (`2xs`, `xs`, and `sm`). For medium and larger breakpoints (`md` and `lg`), use columns in multiples of **2**. - -{{< bootstrap-compatibility >}} - -Includes support for xxl breakpoint, defined like 2xl, making `.col-xxl-*` classes available. - -{{< /bootstrap-compatibility >}} +{{< callout info >}} +**Don't use columns that are too small for the main grid.** To align with the design system, for the main site grid, you should only use columns in multiples of **3** for smaller breakpoints (`2xs`, `xs`, and `sm`). For medium and larger breakpoints (`md` and `lg`), use columns in multiples of **2**. +{{< /callout >}} ## Alignment @@ -37,7 +33,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns. Change the vertical alignment with any of the responsive `align-items-*` classes. {{< example class="bd-example-row bd-example-row-flex-cols" >}} -
    +
    One of three columns @@ -53,7 +49,7 @@ Change the vertical alignment with any of the responsive `align-items-*` classes {{< /example >}} {{< example class="bd-example-row bd-example-row-flex-cols" >}} -
    +
    One of three columns @@ -69,7 +65,7 @@ Change the vertical alignment with any of the responsive `align-items-*` classes {{< /example >}} {{< example class="bd-example-row bd-example-row-flex-cols" >}} -
    +
    One of three columns @@ -87,7 +83,7 @@ Change the vertical alignment with any of the responsive `align-items-*` classes Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes. {{< example class="bd-example-row bd-example-row-flex-cols" >}} -
    +
    One of three columns @@ -107,7 +103,7 @@ Or, change the alignment of each column individually with any of the responsive Change the horizontal alignment with any of the responsive `justify-content-*` classes. {{< example class="bd-example-row" >}} -
    +
    One of two columns @@ -164,7 +160,7 @@ Change the horizontal alignment with any of the responsive `justify-content-*` c If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. {{< example class="bd-example-row" >}} -
    +
    .col-9
    .col-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    @@ -178,7 +174,7 @@ If more than 12 columns are placed within a single row, each group of extra colu Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this. {{< example class="bd-example-row" >}} -
    +
    .col-6 .col-sm-3
    .col-6 .col-sm-3
    @@ -195,7 +191,7 @@ Breaking columns to a new line in flexbox requires a small hack: add an element You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}). {{< example class="bd-example-row" >}} -
    +
    .col-6 .col-sm-4
    .col-6 .col-sm-4
    @@ -216,7 +212,7 @@ You may also apply this break at specific breakpoints with our [responsive displ Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all eight grid tiers. {{< example class="bd-example-row" >}} -
    +
    First in DOM, no order applied @@ -234,7 +230,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes 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. These classes can also be intermixed with the numbered `.order-*` classes as needed. {{< example class="bd-example-row" >}} -
    +
    First in DOM, ordered last @@ -279,7 +275,7 @@ You can offset grid columns with our responsive `.offset-` g Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns. {{< example class="bd-example-row" >}} -
    +
    .col-md-4
    .col-md-4 .offset-md-4
    @@ -297,7 +293,7 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}). {{< example class="bd-example-row" >}} -
    +
    .col-sm-5 .col-md-6
    .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
    @@ -314,7 +310,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset With flexbox grids, you can use margin utilities like `.me-auto` to force sibling columns away from one another. {{< example class="bd-example-row" >}} -
    +
    .col-md-4
    .col-md-4 .ms-auto
    diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index 4106368d2b..607ab989e9 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -21,7 +21,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples Please note that we apply an extra-padding on our containers (see [our mixin](#sass-mixins)). {{< bs-table "table" >}} -| | 2X-small
    <390px
    | X-small
    ≥390px
    | Small
    ≥480px
    | Medium
    ≥736px
    | Large
    ≥1024px
    | X-Large
    ≥1320px
    | 2X-Large
    ≥1640px
    | 3X-Large
    ≥1880px
    | +| | 2x-small
    <390px
    | X-small
    ≥390px
    | Small
    ≥480px
    | Medium
    ≥736px
    | Large
    ≥1024px
    | X-large
    ≥1320px
    | 2x-large
    ≥1640px
    | 3x-large
    ≥1880px
    | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | `.container-fluid` with `.container-max-width` | 100% -
    (2 * 16px)     | 100% -
    (2 * 24px)     | 100% -
    (2 * 28px)     | 100% -
    (2 * 32px)     | 100% -
    (2 * 40px)     | 100% -
    (2 * 56px)     | 1520px | 1520px | | `.container-fluid` | 100% -
    (2 * 16px)     | 100% -
    (2 * 24px)     | 100% -
    (2 * 28px)     | 100% -
    (2 * 32px)     | 100% -
    (2 * 40px)     | 100% -
    (2 * 56px)     | 100% -
    (2 * 80px)     | 100% -
    (2 * 112px)     | @@ -46,7 +46,7 @@ The table below illustrates how each container's `max-width` compares to the ori Please note that we apply an extra-padding on our containers (see [our mixin](#sass-mixins)). {{< bs-table "table" >}} -| | 2X-small
    <390px
    | X-small
    ≥390px
    | Small
    ≥480px
    | Medium
    ≥736px
    | Large
    ≥1024px
    | X-Large
    ≥1320px
    | 2X-Large
    ≥1640px
    | 3X-Large
    ≥1880px
    | +| | 2x-small
    <390px
    | X-small
    ≥390px
    | Small
    ≥480px
    | Medium
    ≥736px
    | Large
    ≥1024px
    | X-large
    ≥1320px
    | 2x-large
    ≥1640px
    | 3x-large
    ≥1880px
    | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | `.container` | 100% -
    (2 * 16px)     | 342px | 424px | 672px | 944px | 1208px | 1480px | 1656px | | `.container-xs` | 100% -
    (2 * 16px)     | 342px | 424px | 672px | 944px | 1208px | 1480px | 1656px | @@ -67,7 +67,7 @@ Our default `.container` class is a responsive, fixed-width container, meaning i **This container should not be used for Orange sites.** ```html -
    +
    ``` @@ -77,14 +77,14 @@ Our default `.container` class is a responsive, fixed-width container, meaning i Responsive containers allow you to specify a class that follows the `.container-fluid` behavior until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` behaves like the `.container-fluid` to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, `2xl`, `xxl` and `3xl`. ```html -
    100% wide until extra small breakpoint
    +
    100% wide until x-small breakpoint
    100% wide until small breakpoint
    100% wide until medium breakpoint
    100% wide until large breakpoint
    -
    100% wide until extra large breakpoint
    -
    100% wide until extra extra large breakpoint
    -
    100% wide until extra extra large breakpoint
    -
    100% wide until extra extra extra large breakpoint
    +
    100% wide until x-large breakpoint
    +
    100% wide until 2x-large breakpoint
    +
    100% wide until 2x-large breakpoint
    +
    100% wide until 3x-large breakpoint
    ``` {{< /bootstrap-compatibility >}} @@ -113,7 +113,7 @@ It is defined as follows: Comparison between `.container-fluid` with `.container-max-width` and `.container-fluid` alone can be seen in the following table: {{< bs-table "table" >}} -| | X-Large
    ≥1320px
    | 2X-Large
    ≥1640px
    | 3X-Large
    ≥1880px
    | +| | X-large
    ≥1320px
    | 2x-large
    ≥1640px
    | 3x-large
    ≥1880px
    | | --- | --- | --- | --- | --- | | `.container-fluid`
    with `.container-max-width` |
    • Width `100% - (2 * 56px)`
    • Margin `2 * 56px`
    • Gutter `32px`
    |
    • Width `100% - (2 * 80px)`
    • Max-width `1520px`
    • Margin `2 * 80px`
    • Gutter `32px`
    |
    • Width `1520px`
    • Margin `2 * 80px`
    • Gutter `32px`
    | | `.container-fluid` |
    • Width `100% - (2 * 56px)`
    • Margin `2 * 56px`
    • Gutter `32px`
    |
    • Width `100% - (2 * 80px)`
    • Margin `2 * 80px`
    • Gutter `32px`
    |
    • Width `100% - (2 * 112px)`
    • Margin `2 * 112px`
    • Gutter `40px`
    | diff --git a/site/content/docs/0.0/layout/grid.md b/site/content/docs/0.0/layout/grid.md index db27647089..ca97eeca69 100644 --- a/site/content/docs/0.0/layout/grid.md +++ b/site/content/docs/0.0/layout/grid.md @@ -17,7 +17,7 @@ OUDS Web's grid system uses a series of containers, rows, and columns to layout {{< /callout >}} {{< example class="bd-example-row" >}} -
    +
    Column @@ -32,7 +32,7 @@ OUDS Web's grid system uses a series of containers, rows, and columns to layout
    {{< /example >}} -The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `.container`. +The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `.container-fluid`. ## How it works @@ -40,7 +40,7 @@ Breaking it down, here's how the grid system comes together: - **Our grid supports [eight responsive breakpoints]({{< docsref "/layout/breakpoints" >}}).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, `2xl` and `3xl`). This means you can control container and column sizing and behavior by each breakpoint. -- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths. +- **Containers center and horizontally pad your content.** Use `.container-fluid` for a responsive container of `width: 100%` across all viewports and devices. - **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes]({{< docsref "/layout/gutters" >}}) to change the spacing of your content. @@ -56,16 +56,16 @@ Be aware of the limitations and [bugs around flexbox](https://github.com/philipw OUDS Web's grid system can adapt across all eight default breakpoints, and any breakpoints you customize. The eight default grid tiers are as follows: -- Extra extra small (2xs) -- Extra small (xs) +- 2x-small (2xs) +- X-small (xs) - Small (sm) - Medium (md) - Large (lg) -- Extra large (xl) -- Extra extra large (2xl) -- Extra extra extra large (3xl) +- X-large (xl) +- 2x-large (2xl) +- 3x-large (3xl) -As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints: +As noted above, each of these breakpoints have their own unique class prefix and modifiers. Here's how the grid changes across these breakpoints:
    @@ -108,15 +108,15 @@ As noted above, each of these breakpoints have their own container, unique class - + - - - - - - - + + + + + + + @@ -178,43 +178,96 @@ Includes support for xxl breakpoint, defined like 2xl. + + + + + + + + + + + + + + - + + + + + + + + - + + + + + + + + - + + + + + - + - + - +
    Container max-widthContainer fluid max-width 100vw -
    (2 * 16px)    		342px424px672px944px1208px1480px1656px100vw -
    (2 * 24px)    		100vw -
    (2 * 28px)    		100vw -
    (2 * 32px)    		100vw -
    (2 * 40px)    		100vw -
    (2 * 56px)    		100vw -
    (2 * 80px)    		100vw -
    (2 * 112px)
    Class prefix
    - xxl
    + 2xs
    + <390px +     		+ xs
    + ≥390px +     		+ sm
    + ≥480px +     		+ md
    + ≥736px +     		+ lg
    + ≥1024px +     		+ xl
    + ≥1320px +     		+ 2xl or xxl
    ≥1640px     		+ 3xl
    + ≥1880px +
    Container max-width100vw -
    (2 * 16px)    		342px424px672px944px1208px 1480px1656px
    Class prefix.col-xxl-.col-.col-xs-.col-sm-.col-md-.col-lg-.col-xl-.col-2xl- or .col-xxl-.col-3xl-
    # of columns1212
    Container padding width16px (each side)24px (each side)28px (each side)32px (each side)40px (each side)56px (each side) 80px (each side)112px (each side)
    Gutter width32px (16px on left and right)8px (4px on left and right)16px (8px on left and right)24px (12px on left and right)32px (16px on left and right)40px (20px on left and right)
    Custom gutters}}">Yes}}">Yes
    NestableYesYes
    Column ordering}}">Yes}}">Yes
    @@ -230,7 +283,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp For example, here are two grid layouts that apply to every device and viewport, from `2xs` to `3xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width. {{< example class="bd-example-row" >}} -
    +
    1 of 2 @@ -258,7 +311,7 @@ For example, here are two grid layouts that apply to every device and viewport, Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. {{< example class="bd-example-row" >}} -
    +
    1 of 3 @@ -289,7 +342,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content. {{< example class="bd-example-row" >}} -
    +
    1 of 3 @@ -317,14 +370,14 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o ## Responsive classes -OUDS Web's grid includes eight tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on any width from extra extra small to extra extra extra large devices however you see fit. +OUDS Web's grid includes eight tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on any width from x-small to 3x-large devices however you see fit. ### All breakpoints For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`. {{< example class="bd-example-row" >}} -
    +
    col
    col
    @@ -343,7 +396,7 @@ For grids that are the same from the smallest of devices to the largest, use the Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`). {{< example class="bd-example-row" >}} -
    +
    col-sm-8
    col-sm-4
    @@ -361,7 +414,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. {{< example class="bd-example-row" >}} -
    +
    .col-md-8
    @@ -390,7 +443,7 @@ Use the responsive `.row-cols-*` classes to quickly set the number of columns th Use these row columns classes to quickly create basic grid layouts or to control your card layouts. {{< example class="bd-example-row" >}} -
    +
    Column
    Column
    @@ -401,7 +454,7 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< /example >}} {{< example class="bd-example-row" >}} -
    +
    Column
    Column
    @@ -412,7 +465,7 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< /example >}} {{< example class="bd-example-row" >}} -
    +
    Column
    Column
    @@ -423,7 +476,7 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< /example >}} {{< example class="bd-example-row" >}} -
    +
    Column
    Column
    @@ -434,7 +487,7 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< /example >}} {{< example class="bd-example-row" >}} -
    +
    Column
    Column
    @@ -445,7 +498,7 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< /example >}} {{< example class="bd-example-row" >}} -
    +
    Column
    Column
    @@ -474,7 +527,7 @@ You can also use the accompanying Sass mixin, `row-cols()`: To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). {{< example class="bd-example-row" >}} -
    +
    Level 1: .col-sm-3 diff --git a/site/content/docs/0.0/utilities/float.md b/site/content/docs/0.0/utilities/float.md index 2028bee5b2..98dea0ac51 100644 --- a/site/content/docs/0.0/utilities/float.md +++ b/site/content/docs/0.0/utilities/float.md @@ -25,13 +25,13 @@ Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent eleme Responsive variations also exist for each `float` value. {{< example >}} -
    Float end on viewports sized XS (extra small) or wider

    +
    Float end on viewports sized XS (x-small) or wider

    Float end on viewports sized SM (small) or wider

    Float end on viewports sized MD (medium) or wider

    Float end on viewports sized LG (large) or wider

    -
    Float end on viewports sized XL (extra large) or wider

    -
    Float end on viewports sized 2XL (extra extra large) or wider

    -
    Float end on viewports sized 3XL (extra extra extra large) or wider

    +
    Float end on viewports sized XL (x-large) or wider

    +
    Float end on viewports sized 2XL (2x-large) or wider

    +
    Float end on viewports sized 3XL (3x-large) or wider

    {{< /example >}} Here are all the support classes: diff --git a/site/data/breakpoints.yml b/site/data/breakpoints.yml index daccf86da4..b06e41b5c7 100644 --- a/site/data/breakpoints.yml +++ b/site/data/breakpoints.yml @@ -1,12 +1,12 @@ - breakpoint: 2xs abbr: "" - name: 2X-Small + name: 2x-small min-width: 0px container: "" - breakpoint: xs abbr: -xs - name: X-Small + name: X-small min-width: 390px container: 342px @@ -30,18 +30,18 @@ - breakpoint: xl abbr: -xl - name: X-Large + name: X-large min-width: 1320px container: 1208px - breakpoint: 2xl abbr: -2xl - name: 2X-Large + name: 2x-large min-width: 1640px container: 1480px - breakpoint: 3xl abbr: -3xl - name: 3X-Large + name: 3x-large min-width: 1880px container: 1656px