Skip to content

Commit 4fdcd73

Browse files
hannahisshannahiss
committed
Merge branch 'ouds/main-his-tokens-grid' into ouds/main-his-tokens-grid-xxl-compat
# Conflicts: # site/content/docs/0.0/migration-from-boosted.md
2 parents e2642a9 + 7d4ec9a commit 4fdcd73

File tree

24 files changed

+118
-135
lines changed

24 files changed

+118
-135
lines changed

‎scss/_containers.scss‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,22 +41,16 @@
4141

4242
// OUDS mod
4343
// scss-docs-start containers-max
44-
.max-width-public-website {
45-
@include media-breakpoint-up(2xl) {
46-
--#{$prefix}container-margin-x: #{$ouds-grid-2xl-margin}; // 80px
47-
max-width: $ouds-grid-2xl-max-width-public-website; // 1680px
44+
.container-max-width {
45+
@include media-breakpoint-up(get-breakpoint-from-width()) {
46+
--#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())};
47+
max-width: $ouds-grid-container-max-width;
4848

4949
.row {
50-
--#{$prefix}gutter-x: #{$ouds-grid-2xl-column-gap}; // 32px
50+
--#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())};
5151
}
5252
}
5353
}
54-
55-
.max-width-specific-tools {
56-
@include media-breakpoint-up(3xl) {
57-
max-width: $ouds-grid-3xl-max-width; // 1920px
58-
}
59-
}
6054
// scss-docs-end containers-max
6155
// End mod
6256
}

‎scss/mixins/_breakpoints.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,14 @@
125125
}
126126
}
127127
}
128+
129+
// Get the breakpoint infix corresponding to a given width
130+
@function get-breakpoint-from-width($width: $ouds-grid-container-max-width, $breakpoints: $grid-breakpoints) {
131+
$breakpoint-infix: "";
132+
@each $infix, $value in $grid-breakpoints {
133+
@if $width >= $value {
134+
$breakpoint-infix: $infix;
135+
}
136+
}
137+
@return $breakpoint-infix;
138+
}

‎scss/ouds-web.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "mixins/banner";
2+
23
@include bsBanner("");
34

45
// scss-docs-start import-stack
@@ -14,7 +15,6 @@
1415
@import "mixins";
1516
@import "utilities";
1617

17-
1818
// Layout & components
1919
@import "root";
2020
@import "reboot";

‎scss/tokens/_raw.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ $ouds-grid-max-width-400: 1023px !default;
8989
$ouds-grid-max-width-500: 1319px !default;
9090
$ouds-grid-max-width-600: 1639px !default;
9191
$ouds-grid-max-width-650: 1680px !default;
92-
$ouds-grid-max-width-700: 1879px !default;
93-
$ouds-grid-max-width-800: 1920px !default;
92+
//$ouds-grid-max-width-700: 1879px !default;
93+
//$ouds-grid-max-width-800: 1920px !default;
9494
$ouds-grid-min-width-100: 1px !default;
9595
$ouds-grid-min-width-200: 390px !default;
9696
$ouds-grid-min-width-300: 480px !default;

‎scss/tokens/_semantic.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,6 @@ $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default;
8383
// $ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default;
8484
$ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default;
8585
$ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default;
86-
$ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default;
87-
// $ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default;
8886
$ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default;
8987
// $ouds-grid-2xl-width: $ouds-grid-width-700 !default;
9088
// $ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default;
@@ -96,7 +94,7 @@ $ouds-grid-2xs-margin: $ouds-grid-margin-100 !default;
9694
// $ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default;
9795
$ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default;
9896
$ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default;
99-
$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default;
97+
//$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default;
10098
$ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default;
10199
// $ouds-grid-3xl-width: $ouds-grid-width-800 !default;
102100
// $ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default;
@@ -129,6 +127,7 @@ $ouds-grid-xs-margin: $ouds-grid-margin-300 !default;
129127
// $ouds-grid-xs-max-width: $ouds-grid-max-width-200 !default;
130128
$ouds-grid-xs-min-width: $ouds-grid-min-width-200 !default;
131129
// $ouds-grid-xs-width: $ouds-grid-width-200 !default;
130+
$ouds-grid-container-max-width: $ouds-grid-max-width-650 !default;
132131
// scss-docs-end ouds-semantic-grid
133132

134133
// Opacity

‎site/content/docs/0.0/examples/grid-system/index.html‎

Lines changed: 17 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<main style="background-color: #ff9f9f" data-bs-theme="light">
2525

26-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
26+
<div class="container-fluid container-max-width mb-3 pt-3">
2727
<h1>OUDS Web grid system example</h1>
2828
<p>Use this page to see how containers behave while resizing the browser window.</p>
2929
<h2>Legend</h2>
@@ -32,17 +32,17 @@ <h2>Legend</h2>
3232
<p><span class="bg-white legend border"></span> <span class="align-middle">Gutters color (#FFFFFF)</span></p>
3333
</div>
3434

35-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
35+
<div class="container-fluid container-max-width mb-3 pt-3">
3636
<p class="text-center">
37-
Class <code class="text-black">.container-fluid</code> with class <code class="text-black">.max-width-public-website</code></p>
37+
Class <code class="text-black">.container-fluid</code> with class <code class="text-black">.container-max-width</code></p>
3838
<p class="text-center">
3939
<svg role="img" aria-label="Warning" class="text-info" height="1.5rem" width="1.5rem">
4040
<use xlink:href="#info"></use>
4141
</svg>
42-
To be used for public websites
42+
To be used by default
4343
</p>
4444
</div>
45-
<div class="container-fluid max-width-public-website mb-3 bg-light">
45+
<div class="container-fluid container-max-width mb-3 bg-light">
4646
<div class="row" style="min-height: 150px">
4747
<div class="col padding-color"></div>
4848
<div class="col padding-color"></div>
@@ -59,39 +59,13 @@ <h2>Legend</h2>
5959
</div>
6060
</div>
6161

62-
<div class="container-fluid max-width-specific-tools mb-3">
63-
<p class="text-center">Class <code class="text-black">.container-fluid</code> with class <code class="text-black">.max-width-specific-tools</code></p>
62+
<div class="container-fluid container-max-width mb-3 pt-3">
63+
<p class="text-center">Class <code class="text-black">.container-fluid</code></p>
6464
<p class="text-center">
6565
<svg role="img" aria-label="Warning" class="text-info" height="1.5rem" width="1.5rem">
6666
<use xlink:href="#info"></use>
6767
</svg>
68-
To be used for specific tools which need more horizontal space
69-
</p>
70-
</div>
71-
<div class="container-fluid max-width-specific-tools bg-light">
72-
<div class="row" style="min-height: 150px">
73-
<div class="col padding-color"></div>
74-
<div class="col padding-color"></div>
75-
<div class="col padding-color"></div>
76-
<div class="col padding-color"></div>
77-
<div class="col padding-color"></div>
78-
<div class="col padding-color"></div>
79-
<div class="col padding-color"></div>
80-
<div class="col padding-color"></div>
81-
<div class="col padding-color"></div>
82-
<div class="col padding-color"></div>
83-
<div class="col padding-color"></div>
84-
<div class="col padding-color"></div>
85-
</div>
86-
</div>
87-
88-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
89-
<p class="text-center">Class <code class="text-black">.container-fluid</code></p>
90-
<p class="text-center">
91-
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
92-
<use xlink:href="#warning-important-accessible"></use>
93-
</svg>
94-
Should not be used alone to be compatible with Orange Unified Design System
68+
To be used if more space is needed
9569
</p>
9670
</div>
9771
<div class="container-fluid mb-3 bg-light">
@@ -111,7 +85,7 @@ <h2>Legend</h2>
11185
</div>
11286
</div>
11387

114-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
88+
<div class="container-fluid container-max-width mb-3 pt-3">
11589
<p class="text-center">Class <code class="text-black">.container</code></p>
11690
<p class="text-center">
11791
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -137,7 +111,7 @@ <h2>Legend</h2>
137111
</div>
138112
</div>
139113

140-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
114+
<div class="container-fluid container-max-width mb-3 pt-3">
141115
<p class="text-center">Class <code class="text-black">.container-xs</code></p>
142116
<p class="text-center">
143117
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -163,7 +137,7 @@ <h2>Legend</h2>
163137
</div>
164138
</div>
165139

166-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
140+
<div class="container-fluid container-max-width mb-3 pt-3">
167141
<p class="text-center">Class <code class="text-black">.container-sm</code></p>
168142
<p class="text-center">
169143
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -189,7 +163,7 @@ <h2>Legend</h2>
189163
</div>
190164
</div>
191165

192-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
166+
<div class="container-fluid container-max-width mb-3 pt-3">
193167
<p class="text-center">Class <code class="text-black">.container-md</code></p>
194168
<p class="text-center">
195169
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -215,7 +189,7 @@ <h2>Legend</h2>
215189
</div>
216190
</div>
217191

218-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
192+
<div class="container-fluid container-max-width mb-3 pt-3">
219193
<p class="text-center">Class <code class="text-black">.container-lg</code></p>
220194
<p class="text-center">
221195
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -241,7 +215,7 @@ <h2>Legend</h2>
241215
</div>
242216
</div>
243217

244-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
218+
<div class="container-fluid container-max-width mb-3 pt-3">
245219
<p class="text-center">Class <code class="text-black">.container-xl</code></p>
246220
<p class="text-center">
247221
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -267,7 +241,7 @@ <h2>Legend</h2>
267241
</div>
268242
</div>
269243

270-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
244+
<div class="container-fluid container-max-width mb-3 pt-3">
271245
<p class="text-center">Class <code class="text-black">.container-2xl</code></p>
272246
<p class="text-center">
273247
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -293,7 +267,7 @@ <h2>Legend</h2>
293267
</div>
294268
</div>
295269

296-
<div class="container-fluid max-width-specific-tools mb-3 pt-3">
270+
<div class="container-fluid container-max-width mb-3 pt-3">
297271
<p class="text-center">Class <code class="text-black">.container-3xl</code></p>
298272
<p class="text-center">
299273
<svg role="img" aria-label="Warning" class="text-warning" height="1.5rem" width="1.5rem">
@@ -319,6 +293,6 @@ <h2>Legend</h2>
319293
</div>
320294
</div>
321295

322-
<div class="container-fluid max-width-public-website pb-3">
296+
<div class="container-fluid container-max-width pb-3">
323297
</div>
324298
</main>

‎site/content/docs/0.0/examples/grid/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
---
1111

1212
<main>
13-
<div class="container-fluid max-width-specific-tools">
13+
<div class="container-fluid container-max-width">
1414
<h1>OUDS Web grid examples</h1>
1515
<p class="lead">Basic grid layouts to get you familiar with building within the OUDS Web grid system.</p>
1616
<p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in OUDS Web by default.</p>
@@ -185,7 +185,7 @@ <h2 class="mt-4">Gutters</h2>
185185
</div>
186186
</div>
187187

188-
<div class="container-fluid max-width-specific-tools" id="containers">
188+
<div class="container-fluid container-max-width" id="containers">
189189
<hr class="my-4">
190190

191191
<h2 class="mt-4">Containers</h2>
@@ -201,6 +201,5 @@ <h2 class="mt-4">Containers</h2>
201201
<div class="container-2xl themed-container text-center"><code>.container-2xl</code></div>
202202
<div class="container-3xl themed-container text-center"><code>.container-3xl</code></div>
203203
<div class="container-fluid themed-container text-center"><code>.container-fluid</code></div>
204-
<div class="container-fluid max-width-public-website themed-container text-center"><code>.container-fluid</code> with <code>.max-width-public-website</code></div>
205-
<div class="container-fluid max-width-specific-tools themed-container text-center"><code>.container-fluid</code> with <code>.max-width-specific-tools</code></div>
204+
<div class="container-fluid container-max-width themed-container text-center"><code>.container-fluid</code> with <code>.container-max-width</code></div>
206205
</main>

‎site/content/docs/0.0/helpers/stretched-link.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Most custom components do not have `position: relative` by default, so we need t
3838
{{< /example >}}
3939

4040
{{< example >}}
41-
<div class="row g-0 bg-body-secondary position-relative">
41+
<div class="row g-none bg-body-secondary position-relative">
4242
<div class="col-md-6 mb-md-0 p-md-4">
4343
{{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
4444
</div>

‎site/content/docs/0.0/layout/breakpoints.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,11 @@ OUDS Web primarily uses the following media query ranges—or breakpoints—in o
7878

7979
// Usage
8080

81-
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
81+
// Example: Hide starting at `min-width: 0`, and then show at the `xs` breakpoint
8282
.custom-class {
8383
display: none;
8484
}
85-
@include media-breakpoint-up(sm) {
85+
@include media-breakpoint-up(xs) {
8686
.custom-class {
8787
display: block;
8888
}

‎site/content/docs/0.0/layout/columns.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ toc: true
2020

2121
- **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.
2222

23-
- **Don't use too small columns for the main grid.** In order to respect the design system, on main site grid, you should only use columns with multiple of **3** for small breakpoints (`2xs`, `xs` and `sm`). You also should use multiple of **2** for medium breakpoints (`2xs`, `xs`, `sm`, `md` and `lg`).
23+
- **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**.
2424

2525
{{< bootstrap-compatibility >}}
2626

@@ -272,7 +272,7 @@ $utilities: map-merge(
272272

273273
### Offsetting columns
274274

275-
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
275+
You can offset grid columns with <!--in two ways: -->our responsive `.offset-` grid classes<!-- and our [margin utilities]({{< docsref "/utilities/spacing" >}})-->. Grid classes are sized to match columns<!-- while margins are more useful for quick layouts where the width of the offset is variable-->.
276276

277277
#### Offset classes
278278

@@ -309,7 +309,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
309309
</div>
310310
{{< /example >}}
311311

312-
#### Margin utilities
312+
<!-- #### Margin utilities
313313
314314
With flexbox grids, you can use margin utilities like `.me-auto` to force sibling columns away from one another.
315315
@@ -328,7 +328,7 @@ With flexbox grids, you can use margin utilities like `.me-auto` to force siblin
328328
<div class="col-auto">.col-auto</div>
329329
</div>
330330
</div>
331-
{{< /example >}}
331+
{{< /example >}} -->
332332

333333
## Standalone column classes
334334

0 commit comments

Comments
 (0)