Merge pull request #212 from LoganTann/issue175-fontStackDocs

Fix #175 : Add a docs section on how to change the font stack

pug/page-contents/typography_content.html

@@ -4,7 +4,6 @@
     <div class="col s12 m8 offset-m1 xl7 offset-xl1">
 
       <div class="section">
-
         <div id="headers" class="section scrollspy">
           <h3 class="header">Headers</h3>
           <p>We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.</p>
@@ -50,7 +49,20 @@ <h3 class="header">Flow Text</h3>
     &lt;p class="flow-text">I am Flow Text&lt;/p>
           </code></pre>
         </div>
-
+        <div id="fontstack" class="section scrollspy">
+          <h2 class="header">Changing the font stack</h2>
+          <p class="caption">
+            The Material Design standard uses Roboto font. We have included the font in our framework.
+            <br>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.
+          </p>
+          <pre><code class="language-css">
+  html,
+  button, input, optgroup, select, textarea {
+    font-family: GillSans, Calibri, Trebuchet, sans-serif;
+  }
+          </code></pre>
+        </div>
       </div>
 
     </div>
@@ -62,6 +74,7 @@ <h3 class="header">Flow Text</h3>
             <li><a href="#headers">Headers</a></li>
             <li><a href="#blockquote">Blockquotes</a></li>
             <li><a href="#flow">Flow Text</a></li>
+            <li><a href="#fontstack">Changing the font stack</a></li>
           </ul>
         </div>
       </div>

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,