diff --git a/scss/_containers.scss b/scss/_containers.scss index 30958632fe..2cd25e16ef 100644 --- a/scss/_containers.scss +++ b/scss/_containers.scss @@ -45,6 +45,12 @@ } } + @if $enable-bootstrap-compatibility { + .container-xxl { + @extend .container-2xl; + } + } + .max-width-specific-tools { @include media-breakpoint-up(3xl) { max-width: $ouds-grid-3xl-max-width; diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 1c4a6556a0..5f80394bd9 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -73,6 +73,14 @@ // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + @if $enable-bootstrap-compatibility { + // Copy 2xl breakpoint into xxl breakpoint + $breakpoint-2xl: map-get($breakpoints, "2xl"); + $breakpoints: map-merge($breakpoints, ("xxl": $breakpoint-2xl)); + $gutter-2xl: map-get($gutters, "2xl"); + $gutters: map-merge($gutters, ("xxl": $gutter-2xl)); + } + @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html index 62be9c445f..b3c655b5a4 100644 --- a/site/content/docs/0.0/examples/grid/index.html +++ b/site/content/docs/0.0/examples/grid/index.html @@ -15,8 +15,8 @@

OUDS Web grid examples

Basic grid layouts to get you familiar with building within the OUDS Web grid system.

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in OUDS Web by default.

-

Five grid tiers

-

There are five tiers to the OUDS Web grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

+

Eight grid tiers

+

There are eight tiers to the OUDS Web grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

.col-4
@@ -24,6 +24,12 @@

Five grid tiers

.col-4
+
+
.col-xs-4
+
.col-xs-4
+
.col-xs-4
+
+
.col-sm-4
.col-sm-4
@@ -54,6 +60,12 @@

Five grid tiers

.col-2xl-4
+
+
.col-3xl-4
+
.col-3xl-4
+
.col-3xl-4
+
+

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

@@ -177,7 +189,7 @@

Gutters

Containers

-

Additional classes added in OUDS Web allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

+

Container classes in OUDS Web allow containers that are 100% wide until a particular breakpoint.

.container
diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md index a0084c9844..570e6dcb01 100644 --- a/site/content/docs/0.0/layout/breakpoints.md +++ b/site/content/docs/0.0/layout/breakpoints.md @@ -44,6 +44,18 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in 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. + +{{< bs-table "table" >}} +| Breakpoint | Class infix | Dimensions | +| --- | --- | --- | +| XX-large | `xxl` | ≥1640px | +{{< /bs-table >}} + +{{< /bootstrap-compatibility >}} + ## 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. diff --git a/site/content/docs/0.0/layout/columns.md b/site/content/docs/0.0/layout/columns.md index fa006eb758..d7d3f20b15 100644 --- a/site/content/docs/0.0/layout/columns.md +++ b/site/content/docs/0.0/layout/columns.md @@ -18,7 +18,13 @@ toc: true - **When building grid layouts, all content goes in columns.** The hierarchy of OUDS Web's grid goes from [container]({{< docsref "/layout/containers" >}}) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences. -- **OUDS Web includes predefined classes for creating fast, responsive layouts.** With [eight breakpoints]({{< docsref "/layout/breakpoints" >}}) 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. +- **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. + +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl, making `.col-xxl-*` classes available. + +{{< /bootstrap-compatibility >}} ## Alignment diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index 9badfe876c..e7a3b9106e 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -38,6 +38,18 @@ Please note that we apply an extra-padding on our containers (see [our mixins](# | `.container-fluid` | 100vw -
(2 * 16px) | 100vw -
(2 * 24px) | 100vw -
(2 * 28px) | 100vw -
(2 * 32px) | 100vw -
(2 * 40px) | 100vw -
(2 * 56px) | 100vw -
(2 * 80px) | 100vw -
(2 * 112px) | {{< /bs-table >}} +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl. + +{{< bs-table "table" >}} +| | 2X-small
<390px
| X-small
≥390px
| Small
≥480px
| Medium
≥736px
| Large
≥1024px
| X-Large
≥1320px
| 2X-Large
≥1640px
| 3X-Large
≥1880px
| +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| `.container-xxl` | 100vw -
(2 * 16px) | 100vw -
(2 * 24px) | 100vw -
(2 * 28px) | 100vw -
(2 * 32px) | 100vw -
(2 * 40px) | 100vw -
(2 * 56px) | 1480px | 1656px | +{{< /bs-table >}} + +{{< /bootstrap-compatibility >}} + ## Default container Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint. @@ -66,6 +78,15 @@ Responsive containers allow you to specify a class that follows the `.container-
100% wide until extra extra extra large breakpoint
``` +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl. + +```html +
100% wide until extra extra large breakpoint
+``` +{{< /bootstrap-compatibility >}} + ## Fluid containers Use `.container-fluid` for a full width container with minimum margins, spanning almost the entire width of the viewport. diff --git a/site/content/docs/0.0/layout/grid.md b/site/content/docs/0.0/layout/grid.md index 344c990c3e..b6a2358549 100644 --- a/site/content/docs/0.0/layout/grid.md +++ b/site/content/docs/0.0/layout/grid.md @@ -167,6 +167,59 @@ As noted above, each of these breakpoints have their own container, unique class +{{< bootstrap-compatibility >}} + +Includes support for xxl breakpoint, defined like 2xl. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ xxl
+ ≥1640px +
Container max-width1480px
Class prefix.col-xxl-
# of columns12
Container padding width80px (each side)
Gutter width32px (16px on left and right)
Custom gutters}}">Yes
NestableYes
Column ordering}}">Yes
+
+{{< /bootstrap-compatibility >}} + ## Auto-layout columns Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`. diff --git a/site/content/docs/0.0/layout/utilities.md b/site/content/docs/0.0/layout/utilities.md index ffb9ef7c69..14d5b63a85 100644 --- a/site/content/docs/0.0/layout/utilities.md +++ b/site/content/docs/0.0/layout/utilities.md @@ -20,7 +20,7 @@ Should you need to add `display: flex` to an element, do so with `.d-flex` or on ## Margin and padding -Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. OUDS Web includes a six-level scale for spacing utilities, based on a `1.25rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1.25rem` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1.25rem` —in LTR— starting at the `md` breakpoint). +Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. OUDS Web includes a eight-level scale for spacing utilities, based on a `1.25rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1.25rem` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1.25rem` —in LTR— starting at the `md` breakpoint). ## Toggle `visibility`