From 1dd77de2babcab57a0a9ef962eb2d87d2d9cfe01 Mon Sep 17 00:00:00 2001 From: Vincent Prothais Date: Tue, 12 Nov 2024 16:42:07 +0100 Subject: [PATCH] changed display classname and reordering of tables and small definition --- scss/_reboot.scss | 2 +- scss/_variables.scss | 20 ++++- site/content/docs/0.0/content/typography.md | 98 +++++++++++++-------- site/content/docs/0.0/utilities/text.md | 3 - 4 files changed, 80 insertions(+), 43 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index b58a84b096..e8fb54adf7 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -313,7 +313,7 @@ strong { // Add the correct font size in all browsers small { - @include font-size($small-font-size); + @extend %body-small; // OUDS mod: instead of `@include font-size($small-font-size)` } diff --git a/scss/_variables.scss b/scss/_variables.scss index 69570045a6..c37ba7394e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -775,11 +775,25 @@ $headings-color: inherit !default; // scss-docs-start display-headings $display-font-sizes: ( - 1: "%display-large", - 2: "%display-medium", - 3: "%display-small" + large: "%display-large", + medium: "%display-medium", + small: "%display-small" ) !default; +@if $enable-bootstrap-compatibility { + $display-font-sizes: map-merge( + $display-font-sizes, + ( + 1: "%display-large", + 2: "%display-medium", + 3: "%display-small", + 4: "%heading-xlarge", + 5: "%heading-large", + 6: "%heading-medium", + ) + ); +} + $display-font-family: null !default; $display-font-style: null !default; $display-font-weight: $ouds-font-weight-web-display !default; diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md index 6ef8835943..4447d49f77 100644 --- a/site/content/docs/0.0/content/typography.md +++ b/site/content/docs/0.0/content/typography.md @@ -25,28 +25,28 @@ These styles can be found within `_reboot.scss`, and the global variables are de All HTML headings, `

` through `

`, are available. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. If you want to get rid of the `max-width`, please make sure to use our `mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}). {{< bs-table >}} -| Heading | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` | +| Heading | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| `

` | `2.5rem` (40px) | `2.25rem` (36px) | `1.75rem` (28px) | -| `

` | `2rem` (32px) | `1.75rem` (28px) | `1.5rem` (24px) | -| `

` | `1.75rem` (28px) | `1.5rem` (24px) | `1.25rem` (20px) | -| `

` | `1.5rem` (24px) | `1.25rem` (20px) | `1.125rem` (18px) | -| `
` | `1.25rem` (20px) | `1.125rem` (18px) | `1rem` (16px) | -| `
` | `1.125rem` (18px) | `1rem` (16px) | `1rem` (16px) | +| `

` | `1.75rem` (28px) | `2.25rem` (36px) | `2.5rem` (40px) | +| `

` | `1.5rem` (24px) | `1.75rem` (28px) | `2rem` (32px) | +| `

` | `1.25rem` (20px) | `1.5rem` (24px) | `1.75rem` (28px) | +| `

` | `1.125rem` (18px) | `1.25rem` (20px) | `1.5rem` (24px) | +| `
` | `1rem` (16px) | `1.125rem` (18px) | `1.25rem` (20px) | +| `
` | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) | {{< /bs-table >}}
See more details about the heading classes {{< bs-table >}} -| Heading | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` | +| Heading | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| `

` | | | | -| `

` | | | | -| `

` | | | | -| `

` | | | | -| `
` | | | | -| `
` | | | | +| `

` | | | | +| `

` | | | | +| `

` | | | | +| `

` | | | | +| `
` | | | | +| `
` | | | | {{< /bs-table >}}
@@ -89,41 +89,69 @@ Traditional heading elements are designed to work best in the meat of your page We provide `.display-*` from `1` through `3`. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints. {{< bs-table >}} -| Display | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` | +| Display | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| `.display-1` | `4.5rem` (72px) | `4rem` (64px) | `2.5rem` (40px) | -| `.display-2` | `3.5rem` (56px) | `3rem` (48px) | `2.25rem` (36px) | -| `.display-3` | `3rem` (48px) | `2.5rem` (40px) | `2rem` (32px) | +| `.display-large` | `2.5rem` (40px) | `4rem` (64px) | `4.5rem` (72px) | +| `.display-medium` | `2.25rem` (36px) | `3rem` (48px) | `3.5rem` (56px) | +| `.display-small` | `2rem` (32px) | `2.5rem` (40px) | `3rem` (48px) | {{< /bs-table >}}
See more details about the `.display` classes {{< bs-table >}} -| Display | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` | +| Display | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| `.display-1` | | | | -| `.display-2` | | | | -| `.display-3` | | | | +| `.display-large` | | | | +| `.display-medium` | | | | +| `.display-small` | | | | {{< /bs-table >}}
+
+
Display 1
+
Display 2
+
Display 3
+
+ +```html +

Display 1

+

Display 2

+

Display 3

+``` + +Display headings are configured via the `$display-font-sizes` Sass map and the variable `$display-font-weight`. + +Display headings are customizable via three variables, `$display-font-family`, `$display-font-style` and `$display-line-height`. + +{{< bootstrap-compatibility >}} + +Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. +
Display 1
Display 2
-
Display 3
+
Display 3
+
Display 4
+
Display 5
+
Display 6
```html

Display 1

Display 2

Display 3

+

Display 4

+

Display 5

+

Display 6

``` -Display headings are configured via the `$display-font-sizes` Sass map and the variable `$display-font-weight`. +Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`. -Display headings are customizable via three variables, `$display-font-family`, `$display-font-style` and `$display-line-height`. +Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`. + +{{< /bootstrap-compatibility >}} {{< scss-docs name="display-headings" file="scss/_variables.scss" >}} @@ -132,31 +160,29 @@ Display headings are customizable via three variables, `$display-font-family`, ` Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use regular font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}). {{< bs-table >}} -| Regular text | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` | +| Regular text | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| X-large | `1.25rem` (20px) | `1.125rem` (18px) | `1rem` (16px) | -| Large | `1.125rem` (18px) | `1rem` (16px) | `1rem` (16px) | -| Medium | `1rem` (16px) | `.875rem` (14px) | `.875rem` (14px) | -| Small | `.875rem` (14px) | `.75rem` (12px) | `.75rem` (12px) | +| Body large | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) | +| Body medium | `.875rem` (14px) | `.875rem` (14px) | `1rem` (16px) | +| Body small | `.75rem` (12px) | `.75rem` (12px) | `.875rem` (14px) | {{< /bs-table >}}
See more details about the regular text classes {{< bs-table >}} -| Regular text | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` | +| Regular text | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| X-large | | | | -| Large | | | | -| Medium | | | | -| Small | | | | +| Body large | | | | +| Body medium | | | | +| Body small | | | | {{< /bs-table >}}
## Lead -Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-text) X-large. +Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-text) body large. {{< example >}}

diff --git a/site/content/docs/0.0/utilities/text.md b/site/content/docs/0.0/utilities/text.md index 75a48d7225..7e251bccf7 100644 --- a/site/content/docs/0.0/utilities/text.md +++ b/site/content/docs/0.0/utilities/text.md @@ -91,7 +91,6 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa | `.fs-hl` | `2rem` (32px) | `1.75rem` (28px) | `1.5rem` (24px) | | `.fs-hm` | `1.75rem` (28px) | `1.5rem` (24px) | `1.25rem` (20px) | | `.fs-hs` | `1.5rem` (24px) | `1.25rem` (20px) | `1.125rem` (18px) | -| `.fs-hxs` | `1.25rem` (20px) | `1.125rem` (18px) | `1rem` (16px) | | `.fs-bl` | `1.125rem` (18px) | `1rem` (16px) | `1rem` (16px) | | `.fs-bm` | `1rem` (16px) | `.875rem` (14px) | `.875rem` (14px) | | `.fs-bs` | `.875rem` (14px) | `.75rem` (12px) | `.75rem` (12px) | @@ -118,7 +117,6 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa | `.fs-hl` |

| | | | `.fs-hm` | | | | | `.fs-hs` | | | | -| `.fs-hxs` | | | | | `.fs-bl` | | | | | `.fs-bm` | | | | | `.fs-bs` | | | | @@ -140,7 +138,6 @@ These classes change the `font-size` but also the `line-height`, the `letter-spa

.fs-hl text

.fs-hm text

.fs-hs text

-

.fs-hxs text

.fs-bl text

.fs-bm text

.fs-bs text