Skip to content

Commit

Permalink
feat(type): set Orange's typescale
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Apr 8, 2020
1 parent ab43d22 commit ea16528
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 38 deletions.
89 changes: 68 additions & 21 deletions scss/_reboot.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,24 @@
// 2. As a best practice, apply a default `background-color`.
// 3. Prevent adjustments of font size after orientation changes in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
// 5. Prevent faux-bold/italic
// See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis

body {
margin: 0; // 1
font-family: $font-family-base;
font-synthesis: none; // Boosted mod // 5
@include font-size($font-size-base);
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: $body-text-align;
letter-spacing: $letter-spacing-base; // Boosted mod
background-color: $body-bg; // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
-webkit-font-smoothing: subpixel-antialiased; // Boosted mod
text-rendering: optimizeSpeed; // Boosted mod
}


Expand Down Expand Up @@ -93,41 +99,37 @@ hr:not([size]) {
%heading {
margin-top: 0; // 1
margin-bottom: $headings-margin-bottom;
@include font-size($font-size-base); // Boosted mod
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
letter-spacing: $letter-spacing-base; // Boosted mod
-webkit-font-smoothing: antialiased; // Boosted mod
-moz-osx-font-smoothing: grayscale; // Boosted mod
text-rendering: optimizeLegibility; // Boosted mod
}

h1 {
@extend %heading;
@include font-size($h1-font-size);
}

h2 {
@extend %heading;
@include font-size($h2-font-size);
}

h3 {
@extend %heading;
@include font-size($h3-font-size);
}

h4 {
@extend %heading;
@include font-size($h4-font-size);
line-height: $h4-line-height;
letter-spacing: $h4-spacing;
}

h5 {
h2 {
@extend %heading;
@include font-size($h5-font-size);
line-height: $h5-line-height;
letter-spacing: $h5-spacing;
}

h3,
h4,
h5,
h6 {
@extend %heading;
@include font-size($h6-font-size);
}


Expand Down Expand Up @@ -188,6 +190,36 @@ ul ol {
margin-bottom: 0;
}

// Boosted mod
// Orange square list-style
ul {
list-style-type: square;
}

// Future-proof markers' color
// See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
li::marker {
color: $primary;
vertical-align: middle;
}

li li::marker { color: $gray-600; }
// stylelint-disable-next-line selector-max-type
li li li::marker { color: $gray-500; }

// Bullet-proof markers' color
// @todo To remove when ::marker support is OK
// See https://caniuse.com/#search=%3A%3Amarker
li::before {
color: $primary;
vertical-align: text-top;
}

li li::before { color: $gray-600; }
// stylelint-disable-next-line selector-max-type
li li li::before { color: $gray-500; }
// End mod

dt {
font-weight: $dt-font-weight;
}
Expand Down Expand Up @@ -352,18 +384,31 @@ svg {

// Tables
//
// Prevent double borders
// 1. Prevent double borders
// 2. Ensure horizontal alignment in table when using numbers
// See https://twitter.com/wesbos/status/932644812582522880
// See https://caniuse.com/#feat=font-variant-numeric
// See https://caniuse.com/#feat=font-feature
// See https://helpx.adobe.com/fonts/using/open-type-syntax.html#tnum

table {
caption-side: bottom;
caption-side: top; // Boosted mod
border-collapse: collapse;
font-feature-settings: "tnum"; // Boosted mod : 2
font-variant-numeric: tabular-nums; // Boosted mod : 2
}

caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
padding-top: $table-caption-padding;
padding-bottom: $table-caption-padding;
@include font-size($h1-font-size); // Boosted mod
font-weight: $font-weight-bold; // Boosted mod
color: $table-caption-color;
text-align: left;
letter-spacing: $h1-spacing; // Boosted mod
-webkit-font-smoothing: antialiased; // Boosted mod
-moz-osx-font-smoothing: grayscale; // Boosted mod
text-rendering: optimizeLegibility; // Boosted mod
}

// 1. Matches default `<td>` alignment by inheriting `text-align`.
Expand All @@ -381,6 +426,7 @@ th {

label {
display: inline-block; // 1
font-weight: $font-weight-bold; // Boosted mod
}

// Remove the default `border-radius` that macOS Chrome adds.
Expand Down Expand Up @@ -411,6 +457,7 @@ textarea {
font-family: inherit;
@include font-size(inherit);
line-height: inherit;
letter-spacing: inherit; // Boosted mod
}

// Show the overflow in Edge
Expand Down
165 changes: 149 additions & 16 deletions scss/_type.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,33 +26,162 @@
}


.lead {
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
// 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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

// 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,
.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,
.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 {
@include font-size($h2-font-size);
line-height: $h2-line-height;
letter-spacing: $h2-spacing;
}

h2,
.display-4 {
@include font-size($h3-font-size);
line-height: $h3-line-height;
letter-spacing: $h3-spacing;
}

h3 {
@include font-size($h4-font-size);
line-height: $h4-line-height;
letter-spacing: $h4-spacing;
}

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 {
@include font-size($h1-font-size);
line-height: $h1-line-height;
letter-spacing: $h1-spacing;
}

h2 {
@include font-size($h2-font-size);
line-height: $h2-line-height;
letter-spacing: $h2-spacing;
}

h3 {
@include font-size($h3-font-size);
line-height: $h3-line-height;
letter-spacing: $h3-spacing;
}

h4 {
@include font-size($h4-font-size);
line-height: $h4-line-height;
letter-spacing: $h4-spacing;
}

h5 {
@include font-size($h5-font-size);
line-height: $h5-line-height;
letter-spacing: $h5-spacing;
}

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


//
// Emphasis
//
Expand Down Expand Up @@ -99,12 +228,16 @@
.blockquote {
margin-bottom: $spacer;
@include font-size($blockquote-font-size);
line-height: $blockquote-line-height; // Boosted mod
letter-spacing: $blockquote-letter-spacing; // Boosted mod
}

.blockquote-footer {
display: block;
@include font-size($blockquote-small-font-size);
line-height: $line-height-sm; // Boosted mod
color: $blockquote-small-color;
letter-spacing: $letter-spacing-base; // Boosted mod

&::before {
content: "\2014\00A0"; // em dash, nbsp
Expand Down
1 change: 1 addition & 0 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -545,6 +545,7 @@ $table-dark-border-color: $gray-700 !default;
$table-striped-order: null !default;

$table-caption-color: $black !default;
$table-caption-padding: .75rem !default; // Boosted mod

$table-bg-level: null !default;
$table-border-level: null !default;
Expand Down
2 changes: 1 addition & 1 deletion scss/boosted.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

@import "root";
@import "reboot";
//@import "type";
@import "type";
//@import "images";
//@import "containers";
//@import "grid";
Expand Down

0 comments on commit ea16528

Please sign in to comment.