From 872cb3d02e22082aba51dda0b742b8840b6d1e37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Fri, 18 Oct 2019 16:14:58 +0200 Subject: [PATCH] =?UTF-8?q?feat(type):=20type-scale=20refactor=20=E2=86=92?= =?UTF-8?q?=20font-size=20+=20line-height=20+=20letter-spacing=20for=20eac?= =?UTF-8?q?h=20breakpoints?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/_reboot.scss | 1 + scss/_type.scss | 177 +++++++++++++++---- scss/_variables.scss | 77 ++++---- site/docs/4.3/assets/scss/_boosted-docs.scss | 8 +- site/docs/4.3/content/typography.md | 110 ++++++++++-- 5 files changed, 286 insertions(+), 87 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 25bc01196f..304b828d8d 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -54,6 +54,7 @@ body { line-height: $line-height-base; color: $body-color; text-align: left; // 3 + letter-spacing: $letter-spacing-base; // Boosted mod background-color: $body-bg; // 2 } diff --git a/scss/_type.scss b/scss/_type.scss index 131b813739..9f58a8d87a 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -7,58 +7,165 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: $headings-margin-bottom; + @include font-size($font-size-base); // Boosted mod font-family: $headings-font-family; font-weight: $headings-font-weight; line-height: $headings-line-height; color: $headings-color; + letter-spacing: $letter-spacing-base; // Boosted mod } -h1, .h1 { @include font-size($h1-font-size); } -h2, .h2 { @include font-size($h2-font-size); } -h3, .h3 { @include font-size($h3-font-size); } -h4, .h4 { @include font-size($h4-font-size); } -h5, .h5 { @include font-size($h5-font-size); } -h6, .h6 { @include font-size($h6-font-size); } - -// Boosted mod -// reduce the size of titles for mobile display -@include media-breakpoint-down(sm) { - h1, .h1 { @include font-size($h1-font-size-mobile); } - h2, .h2 { @include font-size($h2-font-size-mobile); } - h3, .h3 { @include font-size($h3-font-size-mobile); } - h4, .h4 { @include font-size($h4-font-size-mobile); } - h5, .h5 { @include font-size($h5-font-size-mobile); } - h6, .h6 { @include font-size($h6-font-size-mobile); } +// Boosted mod: headings and displays together +// Add letter-spacing and line-height +// Reduce heading font-sizes for mobile +// Mobile first, obviously +[class*="display-"] { + font-weight: $display-weight; } -// end mod -.lead { - @include font-size($lead-font-size); - font-weight: $lead-font-weight; -} - -// Type display classes .display-1 { - @include font-size($display1-size); - font-weight: $display1-weight; - line-height: $display-line-height; + @include font-size($h2-font-size); + line-height: $h2-line-height; + letter-spacing: $h2-spacing; } + .display-2 { - @include font-size($display2-size); - font-weight: $display2-weight; - line-height: $display-line-height; + @include font-size($h3-font-size); + line-height: $h3-line-height; + letter-spacing: $h3-spacing; } + +h1, .h1, .display-3 { - @include font-size($display3-size); - font-weight: $display3-weight; - line-height: $display-line-height; + @include font-size($h4-font-size); + line-height: $h4-line-height; + letter-spacing: $h4-spacing; } + +h2, .h2, .display-4 { - @include font-size($display4-size); - font-weight: $display4-weight; - line-height: $display-line-height; + @include font-size($h5-font-size); + line-height: $h5-line-height; + letter-spacing: $h5-spacing; +} + +.lead { + @include font-size($h6-font-size); + font-weight: $lead-font-weight; + line-height: $h6-line-height; + letter-spacing: $h6-spacing; } +@include media-breakpoint-up(sm) { + .display-1 { + @include font-size($display2-size); + line-height: $display-line-height; + letter-spacing: $display2-spacing; + } + + .display-2 { + @include font-size($display3-size); + line-height: $display-line-height; + letter-spacing: $display3-spacing; + } + + .display-3 { + @include font-size($display4-size); + line-height: $display-line-height; + letter-spacing: $display4-spacing; + } + + h1, .h1 { + @include font-size($h2-font-size); + line-height: $h2-line-height; + letter-spacing: $h2-spacing; + } + + h2, .h2, + .display-4 { + @include font-size($h3-font-size); + line-height: $h3-line-height; + letter-spacing: $h3-spacing; + } + + h3, .h3 { + @include font-size($h4-font-size); + line-height: $h4-line-height; + letter-spacing: $h4-spacing; + } + + h4, .h4, + .lead { + @include font-size($h5-font-size); + line-height: $h5-line-height; + letter-spacing: $h5-spacing; + } +} + +@include media-breakpoint-up(lg) { + .display-1 { + @include font-size($display1-size); + letter-spacing: $display1-spacing; + } + + .display-2 { + @include font-size($display2-size); + letter-spacing: $display2-spacing; + } + + .display-3 { + @include font-size($display3-size); + letter-spacing: $display3-spacing; + } + + .display-4 { + @include font-size($display4-size); + letter-spacing: $display4-spacing; + } + + h1, .h1 { + @include font-size($h1-font-size); + line-height: $h1-line-height; + letter-spacing: $h1-spacing; + } + + h2, .h2 { + @include font-size($h2-font-size); + line-height: $h2-line-height; + letter-spacing: $h2-spacing; + } + + h3, .h3 { + @include font-size($h3-font-size); + line-height: $h3-line-height; + letter-spacing: $h3-spacing; + } + + h4, .h4 { + @include font-size($h4-font-size); + line-height: $h4-line-height; + letter-spacing: $h4-spacing; + } + + h5, .h5 { + @include font-size($h5-font-size); + line-height: $h5-line-height; + letter-spacing: $h5-spacing; + } + + h6, .h6 { + @include font-size($h6-font-size); + line-height: $h6-line-height; + letter-spacing: $h6-spacing; + } + + .lead { + @include font-size($lead-font-size); + line-height: $lead-line-height; + letter-spacing: $lead-letter-spacing; + } +} +// end mod // // Horizontal rules diff --git a/scss/_variables.scss b/scss/_variables.scss index bc4541c1a2..a86f666dee 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -313,10 +313,12 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberatio $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case +// Boosted mod +// Type scale & vertical rhythm completely revamped to match Orange Web Guidelines $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: $font-size-base * 1.125 !default; // 18px -$font-size-xlg: $font-size-base * 1.25 !default; // 20px -$font-size-sm: $font-size-base * .875 !default; // 14px +$font-size-xlg: $font-size-base * 1.25 !default; // 20px +$font-size-sm: $font-size-base * .875 !default; // 14px $font-weight-lighter: lighter !default; $font-weight-light: 300 !default; @@ -326,48 +328,63 @@ $font-weight-bolder: bolder !default; $font-weight-base: $font-weight-normal !default; $line-height-base: 1.25 !default; // 20px - -$h1-font-size: $font-size-base * 2.125 !default; // 34px -$h2-font-size: $font-size-base * 1.875 !default; // 30px -$h3-font-size: $font-size-base * 1.5 !default; // 24px -$h4-font-size: $font-size-base * 1.25 !default; // 20px -$h5-font-size: $font-size-base * 1.125 !default; // 18px -$h6-font-size: $font-size-base !default; // 16px - -$h1-font-size-mobile: $font-size-base * 1.25 !default; // 20px -$h2-font-size-mobile: $font-size-base * 1.125 !default; // 18px -$h3-font-size-mobile: $font-size-base !default; // 16px -$h4-font-size-mobile: $font-size-base * .875 !default; // 14px -$h5-font-size-mobile: $font-size-base * .875 !default; // 14px -$h6-font-size-mobile: $font-size-base * .875 !default; // 14px +$letter-spacing-base: map-get($spacers, 2) / -100 !default; // -0.1px + +$h1-font-size: $font-size-base * 2.125 !default; // 34px +$h2-font-size: $font-size-base * 1.875 !default; // 30px +$h3-font-size: $font-size-base * 1.5 !default; // 24px +$h4-font-size: $font-size-xlg !default; // 20px +$h5-font-size: $font-size-lg !default; // 18px +$h6-font-size: $font-size-base !default; // 16px +$h1-spacing: $letter-spacing-base * 10 !default; // -1px +$h2-spacing: $letter-spacing-base * 8 !default; // -0.8px +$h3-spacing: $letter-spacing-base * 6 !default; // -0.6px +$h4-spacing: $letter-spacing-base * 4 !default; // -0.4px +$h5-spacing: $letter-spacing-base * 2 !default; // -0.2px +$h6-spacing: $letter-spacing-base !default; +$h1-line-height: 1 !default; +$h2-line-height: 1.067 !default; // calc(32 / 30) +$h3-line-height: 1.083 !default; // calc(26 / 24) +$h4-line-height: 1.1 !default; // calc(22 / 20) +$h5-line-height: 1.111 !default; // calc(20 / 18) +$h6-line-height: 1.125 !default; // calc(18 / 16) $headings-margin-bottom: $spacer !default; $headings-font-family: null !default; $headings-font-weight: 700 !default; -$headings-line-height: 1.1 !default; +$headings-line-height: $h6-line-height !default; $headings-color: null !default; -$display1-size: 3.75rem !default; // 60px -$display2-size: 3.125rem !default; // 50px -$display3-size: 2.5rem !default; // 40px -$display4-size: 2.125rem !default; // 34px +$display1-size: $font-size-xlg * 3 !default; // 60px +$display2-size: $font-size-xlg * 2.5 !default; // 50px +$display3-size: $font-size-xlg * 2 !default; // 40px +$display4-size: $h1-font-size !default; // 34px + +$display1-spacing: $letter-spacing-base * 24 !default; // -2.4px +$display2-spacing: $letter-spacing-base * 16 !default; // -1.6px +$display3-spacing: $letter-spacing-base * 12 !default; // -1.2px +$display4-spacing: $h1-spacing !default; // -1px +// end mod -$display1-weight: 700 !default; -$display2-weight: 700 !default; -$display3-weight: 700 !default; -$display4-weight: 700 !default; -$display-line-height: $headings-line-height !default; +$display-weight: 700 !default; +//$display1-weight: 700 !default; // Boosted mod +//$display2-weight: 700 !default; // Boosted mod +//$display3-weight: 700 !default; // Boosted mod +//$display4-weight: 700 !default; // Boosted mod +$display-line-height: 1 !default; -$lead-font-size: $font-size-base * 1.25 !default; -$lead-font-weight: 300 !default; +$lead-font-size: $font-size-xlg !default; // Boosted mod +$lead-font-weight: 400 !default; // Boosted mod +$lead-line-height: 1.5 !default; // calc(30 / 20) +$lead-letter-spacing: -.015625rem !default; // Boosted mod -$small-font-size: .875rem !default; // 14px +$small-font-size: $font-size-sm !default; // Boosted mod → 14px $text-muted: $gray-700 !default; $blockquote-small-color: $gray-700 !default; $blockquote-small-font-size: $small-font-size !default; -$blockquote-font-size: $font-size-base * 1.25 !default; +$blockquote-font-size: $font-size-xlg !default; // Boosted mod $hr-border-color: $gray-300 !default; $hr-border-width: $border-width / 2 !default; diff --git a/site/docs/4.3/assets/scss/_boosted-docs.scss b/site/docs/4.3/assets/scss/_boosted-docs.scss index 7a8c19ff59..5f2082288c 100644 --- a/site/docs/4.3/assets/scss/_boosted-docs.scss +++ b/site/docs/4.3/assets/scss/_boosted-docs.scss @@ -153,14 +153,10 @@ #placement, #collapsible-content, #sizing, -#text-alignment { +#text-alignment, +#responsive-font-sizes { display: flex; - &::after { - @include sr-only(); - content: "warning, not brand compliant"; - } - &::before { display: inline-block; height: auto; diff --git a/site/docs/4.3/content/typography.md b/site/docs/4.3/content/typography.md index 77301660f4..16b71189f9 100644 --- a/site/docs/4.3/content/typography.md +++ b/site/docs/4.3/content/typography.md @@ -28,9 +28,18 @@ All HTML headings, `

` through `

`, are available. - Heading - Computer size - Mobile size + Heading + Desktop size + Tablet size + Mobile size + + Line height + Desktop + + + Letter spacing + Desktop + @@ -40,8 +49,11 @@ All HTML headings, `

` through `

`, are available. {{ "`

`" | markdownify }} - Bold 2.125rem (34px) - Bold 1.25rem (20px) + Bold 2.125rem (34px) + Bold 1.875rem (30px) + Bold 1.25rem (20px) + 1 (34px) + -0.0625rem (-1px) @@ -49,8 +61,11 @@ All HTML headings, `

` through `

`, are available. {{ "`

`" | markdownify }} - Bold 1.875rem (30px) - Bold 1.125rem (18px) + Bold 1.875rem (30px) + Bold 1.5rem (24px) + Bold 1.125rem (18px) + 1.067 (32px) + -0.05rem (-0.8px) @@ -58,8 +73,11 @@ All HTML headings, `

` through `

`, are available. {{ "`

`" | markdownify }} - Bold 1.5rem (24px) - Bold 1rem (16px) + Bold 1.5rem (24px) + Bold 1.25rem (20px) + Bold 1rem (16px) + 1.083 (26px) + -0.0375rem (-0.6px) @@ -67,8 +85,11 @@ All HTML headings, `

` through `

`, are available. {{ "`

`" | markdownify }} - Bold 1.25rem (20px) - Bold .875rem (14px) + Bold 1.25rem (20px) + Bold 1.125rem (18px) + Bold 1rem (16px) + 1.1 (22px) + -0.025rem (-0.4px) @@ -76,8 +97,10 @@ All HTML headings, `

` through `

`, are available. {{ "`
`" | markdownify }} - Bold 1.125rem (18px) - Bold .875rem (14px) + Bold 1.125rem (18px) + Bold 1rem (16px) + 1.111 (20px) + -0.0125rem (-0.2px) @@ -85,8 +108,9 @@ All HTML headings, `

` through `

`, are available. {{ "`
`" | markdownify }} - Bold 1rem (16px) - Bold .875rem (14px) + Bold 1rem (16px) + 1.125 (18px) + -0.00625rem (-0.1px) @@ -127,8 +151,62 @@ Use the included utility classes to recreate the small secondary heading text fr ## Display headings -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. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes). +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. +[comment]: # Boosted mod + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Display sizeDesktop sizeTablet sizeMobile size + Line height + Desktop + + Letter spacing + Desktop +
Display 1Bold 3.75rem (60px)Bold 3.125rem (50px)Bold 1.875rem (30px)1 (60px)-0.15rem (-2.4px)
Display 2Bold 3.125rem (50px)Bold 2.5rem (40px)Bold 1.5rem (24px)1 (50px)-0.1rem (-1.6px)
Display 3Bold 2.5rem (40px)Bold 2.125rem (34px)Bold 1.25rem (20px)1 (40px)-0.075rem (-1.2px)
Display 4Bold 2.125rem (34px)Bold 1.5rem (24px)Bold 1.125rem (18px)1 (34px)-0.0625rem (-1px)
+