From ecd870fe287ce2487c04f52cac52af4208056617 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 5 Aug 2022 09:22:20 +0200 Subject: [PATCH 1/2] Re-enter values back from v4 --- site/content/docs/5.2/layout/breakpoints.md | 16 +++++++------- site/content/docs/5.2/layout/containers.md | 2 +- site/content/docs/5.2/layout/grid.md | 24 +++++++++++++++------ 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/site/content/docs/5.2/layout/breakpoints.md b/site/content/docs/5.2/layout/breakpoints.md index cd00d4f247..2550c83e55 100644 --- a/site/content/docs/5.2/layout/breakpoints.md +++ b/site/content/docs/5.2/layout/breakpoints.md @@ -20,14 +20,14 @@ toc: true Boosted includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files. {{< bs-table "table" >}} -| Breakpoint | Class infix | Dimensions | -| --- | --- | --- | -| Extra small | None |<480px | -| Small | `sm` | ≥480px | -| Medium | `md` | ≥768px | -| Large | `lg` | ≥1024px | -| Extra large | `xl` | ≥1280px | -| Extra extra large | `xxl` | ≥1440px | +| Breakpoint | Class infix | Dimensions | Device | +| --- | --- | --- | --- | +| Extra small | None |<480px | Mobile portrait | +| Small | `sm` | ≥480px | Mobile landscape | +| Medium | `md` | ≥768px | Tablet portrait | +| Large | `lg` | ≥1024px | Small desktop / Tablet landscape | +| Extra large | `xl` | ≥1280px | Medium desktop | +| Extra extra large | `xxl` | ≥1440px | Large desktop | {{< /bs-table >}} Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also 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. diff --git a/site/content/docs/5.2/layout/containers.md b/site/content/docs/5.2/layout/containers.md index 84a0fc149f..b2ada30b6b 100644 --- a/site/content/docs/5.2/layout/containers.md +++ b/site/content/docs/5.2/layout/containers.md @@ -24,7 +24,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 mixins](#mixins)) {{< bs-table "table" >}} -| | Extra small
<576px
| Small
≥576px
| Medium
≥768px
| Large
≥992px
| X-Large
≥1200px
| XX-Large
≥1400px
| +| | Extra small
<480px
| Small
≥480px
| Medium
≥768px
| Large
≥1024px
| X-Large
≥1280px
| XX-Large
≥1440px
| | --- | --- | --- | --- | --- | --- | --- | | `.container` | 312px | 468px | 744px | 960px | 1200px | 1320px | | `.container-sm` | 100vw -
(2 * 4px) | 468px | 744px | 960px | 1200px | 1320px | diff --git a/site/content/docs/5.2/layout/grid.md b/site/content/docs/5.2/layout/grid.md index 9200885f68..9dae6d61ad 100644 --- a/site/content/docs/5.2/layout/grid.md +++ b/site/content/docs/5.2/layout/grid.md @@ -97,12 +97,12 @@ As noted above, each of these breakpoints have their own container, unique class Container max-width - 320px - 480px - 768px - 1024px - 1280px - 1440px + 302px + 458px + 724px + 940px + 1180px + 1300px Class prefix @@ -117,9 +117,19 @@ As noted above, each of these breakpoints have their own container, unique class # of columns 12 + + Column width + 16px + 29px + 42px + 60px + 80px + 90px + Gutter width - 1.5rem (.75rem on left and right) + .625rem (.3125rem on left and right) + 1.25rem (.625rem on left and right) Custom gutters From 90f3d0212ebd1d2c96368307515e91ce1d861eff Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 24 Aug 2022 15:17:33 +0200 Subject: [PATCH 2/2] Fixes from review --- site/content/docs/5.2/layout/breakpoints.md | 16 ++++++++-------- site/content/docs/5.2/layout/grid.md | 12 ++++++------ 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/site/content/docs/5.2/layout/breakpoints.md b/site/content/docs/5.2/layout/breakpoints.md index 2550c83e55..cd00d4f247 100644 --- a/site/content/docs/5.2/layout/breakpoints.md +++ b/site/content/docs/5.2/layout/breakpoints.md @@ -20,14 +20,14 @@ toc: true Boosted includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files. {{< bs-table "table" >}} -| Breakpoint | Class infix | Dimensions | Device | -| --- | --- | --- | --- | -| Extra small | None |<480px | Mobile portrait | -| Small | `sm` | ≥480px | Mobile landscape | -| Medium | `md` | ≥768px | Tablet portrait | -| Large | `lg` | ≥1024px | Small desktop / Tablet landscape | -| Extra large | `xl` | ≥1280px | Medium desktop | -| Extra extra large | `xxl` | ≥1440px | Large desktop | +| Breakpoint | Class infix | Dimensions | +| --- | --- | --- | +| Extra small | None |<480px | +| Small | `sm` | ≥480px | +| Medium | `md` | ≥768px | +| Large | `lg` | ≥1024px | +| Extra large | `xl` | ≥1280px | +| Extra extra large | `xxl` | ≥1440px | {{< /bs-table >}} Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also 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. diff --git a/site/content/docs/5.2/layout/grid.md b/site/content/docs/5.2/layout/grid.md index 9dae6d61ad..c652f52581 100644 --- a/site/content/docs/5.2/layout/grid.md +++ b/site/content/docs/5.2/layout/grid.md @@ -97,12 +97,12 @@ As noted above, each of these breakpoints have their own container, unique class Container max-width - 302px - 458px - 724px - 940px - 1180px - 1300px + 312px + 468px + 744px + 960px + 1200px + 1320px Class prefix