From 4f6eb5c581185122f0a254e0ba570f231376efca Mon Sep 17 00:00:00 2001 From: LoganTann Date: Mon, 18 Oct 2021 11:40:03 +0200 Subject: [PATCH 1/4] docs(typography): update how to change the font stack I'm still wondering why the font section have been deleted... See : https://git.io/JK9is Closes #175 --- pug/page-contents/typography_content.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/pug/page-contents/typography_content.html b/pug/page-contents/typography_content.html index f57f813049..a07b51a7c1 100644 --- a/pug/page-contents/typography_content.html +++ b/pug/page-contents/typography_content.html @@ -4,6 +4,25 @@
+
+

Roboto

+

+ The standard font Material Design uses is Roboto. We have included the font files with our framework. +

+
+

We bundle our framework with the latest iteration of Roboto Google has released. It comes with 5 different font weights you can use: 100, 300, 400, 500, 600.

Here is an image from Google's Roboto Specimen document displaying the different font weights.

+ +
+ +

Removing Roboto

+

In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the code below to your liking and add it to your custom css.

+ 

+    html,
+    button, input, optgroup, select, textarea {
+      font-family: GillSans, Calibri, Trebuchet, sans-serif;
+    }
+
+

Headers

From fc01db12a0fab2c2c9fec6e2a2c6a111cad1b433 Mon Sep 17 00:00:00 2001 From: LoganTann Date: Mon, 18 Oct 2021 12:03:29 +0200 Subject: [PATCH 2/4] refactor(_global.scss): remove unused commented out code --- sass/components/_global.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/sass/components/_global.scss b/sass/components/_global.scss index 79b35c3eea..8207aec895 100644 --- a/sass/components/_global.scss +++ b/sass/components/_global.scss @@ -7,16 +7,6 @@ html { box-sizing: inherit; } -body { - // display: flex; - // min-height: 100vh; - // flex-direction: column; -} - -main { - // flex: 1 0 auto; -} - button, input, optgroup, From 3548ebbd612d6e41b20188112edf7c7f30066396 Mon Sep 17 00:00:00 2001 From: LoganTann Date: Mon, 18 Oct 2021 12:45:58 +0200 Subject: [PATCH 3/4] docs(typography): change the roboto section to the fontstack section I'm removing the most of the section about the Roboto Font by just keeping the "how to change the font stack" part. Fixes #175 --- pug/page-contents/typography_content.html | 36 ++++++++++------------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/pug/page-contents/typography_content.html b/pug/page-contents/typography_content.html index a07b51a7c1..83135c1dd0 100644 --- a/pug/page-contents/typography_content.html +++ b/pug/page-contents/typography_content.html @@ -4,26 +4,6 @@
-
-

Roboto

-

- The standard font Material Design uses is Roboto. We have included the font files with our framework. -

-
-

We bundle our framework with the latest iteration of Roboto Google has released. It comes with 5 different font weights you can use: 100, 300, 400, 500, 600.

Here is an image from Google's Roboto Specimen document displaying the different font weights.

- -
- -

Removing Roboto

-

In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the code below to your liking and add it to your custom css.

- 

-    html,
-    button, input, optgroup, select, textarea {
-      font-family: GillSans, Calibri, Trebuchet, sans-serif;
-    }
-
-
-

Headers

We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.

@@ -69,7 +49,20 @@

Flow Text

<p class="flow-text">I am Flow Text</p>
- +
+

Changing the font stack

+

+ The standard font Material Design uses is Roboto. We have included the font files with our framework. +
In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the + code below to your liking and add it to your custom CSS. +

+ 

+  html,
+  button, input, optgroup, select, textarea {
+    font-family: GillSans, Calibri, Trebuchet, sans-serif;
+  }
+
+
@@ -81,6 +74,7 @@

Flow Text

  • Headers
  • Blockquotes
  • Flow Text
    • +
  • Changing the font stack
    • From 0def7b7865dd1c3191faeea68513330484e57624 Mon Sep 17 00:00:00 2001 From: LoganTann Date: Thu, 21 Oct 2021 08:50:59 +0200 Subject: [PATCH 4/4] docs(typography): update description of the section "Changing the font stack" this applies the suggested changed of this review : https://github.com/materializecss/materialize/pull/212#discussion_r730912265 --- pug/page-contents/typography_content.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pug/page-contents/typography_content.html b/pug/page-contents/typography_content.html index 83135c1dd0..4f5155cbb4 100644 --- a/pug/page-contents/typography_content.html +++ b/pug/page-contents/typography_content.html @@ -52,8 +52,8 @@

    Flow Text

    Changing the font stack

    - The standard font Material Design uses is Roboto. We have included the font files with our framework. -
    In case you don't want to use Roboto on your webpage, fear not. Simply change the font stack by modifying the + The Material Design standard uses Roboto font. We have included the font in our framework. +
    In case you don't want to use Roboto on your webpage, fear not. You can change the font stack by modifying the code below to your liking and add it to your custom CSS.