diff --git a/scss/_maps.scss b/scss/_maps.scss index 1d74a19814..57830e4dc7 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -194,14 +194,22 @@ $gutters: ( ) !default; // scss-docs-end grid-gutters -// scss-docs-start gutters +// scss-docs-start gutters-utilities $gutters-utilities: ( none: 0, - extra-short: $ouds-grid-column-gap-200, // 16 - short: $ouds-grid-column-gap-400, // 24 - large: $ouds-grid-column-gap-800 // 40 + smash: 2px, + shortest: 4px, + shorter: $ouds-grid-column-gap-100, // 8 + short: 12px, + medium: $ouds-grid-column-gap-200, // 16 + tall: $ouds-grid-column-gap-400, // 24 + taller: $ouds-grid-column-gap-600, // 32 + tallest: $ouds-grid-column-gap-800, // 40 + spacious: 48px, + huge: 56px, + jumbo: 64px ) !default; -// scss-docs-end gutters +// scss-docs-end gutters-utilities // End mod diff --git a/site/content/docs/0.0/layout/breakpoints.md b/site/content/docs/0.0/layout/breakpoints.md index 570e6dcb01..a0084c9844 100644 --- a/site/content/docs/0.0/layout/breakpoints.md +++ b/site/content/docs/0.0/layout/breakpoints.md @@ -44,18 +44,6 @@ 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 d7d3f20b15..a87c78301f 100644 --- a/site/content/docs/0.0/layout/columns.md +++ b/site/content/docs/0.0/layout/columns.md @@ -20,12 +20,6 @@ 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. -{{< bootstrap-compatibility >}} - -Includes support for xxl breakpoint, defined like 2xl, making `.col-xxl-*` classes available. - -{{< /bootstrap-compatibility >}} - ## Alignment Use flexbox alignment utilities to vertically and horizontally align columns. diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index e7a3b9106e..9badfe876c 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -38,18 +38,6 @@ 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. @@ -78,15 +66,6 @@ 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 b6a2358549..344c990c3e 100644 --- a/site/content/docs/0.0/layout/grid.md +++ b/site/content/docs/0.0/layout/grid.md @@ -167,59 +167,6 @@ 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/gutters.md b/site/content/docs/0.0/layout/gutters.md index 7255b42b21..b8b5cfdf3b 100644 --- a/site/content/docs/0.0/layout/gutters.md +++ b/site/content/docs/0.0/layout/gutters.md @@ -8,151 +8,273 @@ aliases: toc: true --- -## How they work +{{< callout-soon "page" >}} + + diff --git a/site/content/docs/0.0/layout/utilities.md b/site/content/docs/0.0/layout/utilities.md index 14d5b63a85..8d867181a0 100644 --- a/site/content/docs/0.0/layout/utilities.md +++ b/site/content/docs/0.0/layout/utilities.md @@ -14,13 +14,13 @@ Use our [display utilities]({{< docsref "/utilities/display" >}}) for responsive ## Flexbox options -OUDS Web is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components]({{< docsref "/components/alerts" >}}) are built with flexbox enabled. +OUDS Web is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more. -## Margin and padding + ## Toggle `visibility` diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 9202473f37..09753f8e51 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -11,6 +11,14 @@ toc: true ## v0.0.4 +### Layout + +- New Flexbox grid system is now available to build layouts of all shapes and sizes thanks to a twelve column system and eight default responsive tiers defined at breakpoints 2xs, xs, sm, md, xl, 2xl and 3xl. + - Use our flexbox grid containers (`.container`, `.container-fluid` or `.container-{breakpoint}`) as a fundamental building block that contain, pad, and align your content within a given device or viewport. + - Use `.col-*` classes to modify columns with a handful of options for alignment, ordering, and offsetting. + - Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. + - + ### Utilities #### Border @@ -30,6 +38,10 @@ toc: true - New Border style utilities: `.border-drag`. +#### Display + +- New Responsive display utility classes are now available. + #### Opacity - Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong`. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 7f5d21f3f4..6d4d4b88a6 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -57,6 +57,7 @@ - title: Grid - title: Columns - title: Gutters + draft: true - title: Utilities - title: Z-index - title: CSS Grid