Replaced typography plugin with a global css files

This is to simplify the template and show how global css can be created manually. Replacing with the typography plugin is always possible and easy!

README.md

@@ -7,7 +7,7 @@ The Material-UI theme is configured in `src/getPageContext.js`. This theme is pr
 
 Additionally, if you create your own JSS styles in a component, you need to wrap it with the `withStyles` HOC in order to pass your custom styles down (e.g. `src/components/layout.js`).
 
-I have used `gatsby-plugin-typography` + `typeface-roboto` to provide global styles (somewhat) compatible with Material Design. You can delete these global styles if you don't need them.
+I have also provided a way to create global styles (see `src/styles/styles.css`). This allows you to style simple HTML markup, e.g. markup generated by Markdown. An alternate way to do this is using [gatsby-plugin-typography](https://www.gatsbyjs.org/packages/gatsby-plugin-typography/).
 
 ## Prerequisites
 

gatsby-browser.js

@@ -1,5 +1,20 @@
-require('typeface-roboto');
+require('./src/styles/styles.css');
 
 // onClientEntry() must be included for the requires above to be triggered,
 // even if it is empty!
-exports.onClientEntry = () => {};
+exports.onClientEntry = () => {
+    // Load Roboto font to support Material Design
+    const pathRoboto =
+        'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
+    const linkRoboto = document.createElement('link');
+    linkRoboto.setAttribute('rel', 'stylesheet');
+    linkRoboto.setAttribute('href', pathRoboto);
+    document.head.appendChild(linkRoboto);
+
+    // Load Material Icons
+    const pathIcons = 'https://fonts.googleapis.com/icon?family=Material+Icons';
+    const linkIcons = document.createElement('link');
+    linkIcons.setAttribute('rel', 'stylesheet');
+    linkIcons.setAttribute('href', pathIcons);
+    document.head.appendChild(linkIcons);
+};

gatsby-config.js

@@ -16,12 +16,6 @@ module.exports = {
                 icon: 'src/images/gatsby-icon.png' // This path is relative to the root of the site.
             }
         },
-        'gatsby-plugin-offline',
-        {
-            resolve: `gatsby-plugin-typography`,
-            options: {
-                pathToConfigModule: `src/utils/typography.js`
-            }
-        }
+        'gatsby-plugin-offline'
     ]
 };

package.json

@@ -18,20 +18,17 @@
   },
   "dependencies": {
     "@material-ui/core": "^3.0.0",
+    "@material-ui/icons": "^3.0.0",
     "gatsby": "next",
     "gatsby-plugin-manifest": "next",
     "gatsby-plugin-offline": "next",
     "gatsby-plugin-react-helmet": "next",
-    "gatsby-plugin-typography": "next",
     "jss": "^9.8.7",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-helmet": "^5.2.0",
-    "react-jss": "^8.6.1",
-    "react-typography": "^0.16.13",
-    "typeface-roboto": "^0.0.54",
-    "typography": "^0.16.17"
+    "react-jss": "^8.6.1"
   },
   "devDependencies": {
     "prettier": "^1.14.2"

src/pages/index.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete';
 import { Link } from 'gatsby';
 
 import Layout from '../components/layout';
@@ -10,6 +13,9 @@ const styles = theme => ({
     section: {
         marginTop: theme.spacing.unit * 3
     },
+    toolbar: {
+        marginTop: theme.spacing.unit * 2
+    },
     button: {
         marginRight: theme.spacing.unit
     }
@@ -27,20 +33,56 @@ const IndexPage = ({ classes }) => (
             <Typography variant="title" gutterBottom>
                 Sample Components
             </Typography>
-            <Button
-                variant="contained"
-                color="primary"
-                className={classes.button}
-            >
-                Primary
-            </Button>
-            <Button
-                variant="contained"
-                color="secondary"
-                className={classes.button}
-            >
-                Secondary
-            </Button>
+            <div className={classes.toolbar}>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    className={classes.button}
+                >
+                    Primary
+                </Button>
+                <Button
+                    variant="contained"
+                    color="secondary"
+                    className={classes.button}
+                >
+                    Secondary
+                </Button>
+            </div>
+            <div className={classes.toolbar}>
+                <Button
+                    variant="fab"
+                    color="primary"
+                    aria-label="Add"
+                    className={classes.button}
+                >
+                    <AddIcon />
+                </Button>
+                <Button
+                    variant="fab"
+                    color="primary"
+                    aria-label="Edit"
+                    className={classes.button}
+                >
+                    <Icon>edit_icon</Icon>
+                </Button>
+                <Button
+                    variant="fab"
+                    color="secondary"
+                    aria-label="Delete"
+                    className={classes.button}
+                >
+                    <DeleteIcon />
+                </Button>
+                <Button
+                    variant="fab"
+                    color="secondary"
+                    aria-label="Star"
+                    className={classes.button}
+                >
+                    <Icon>star</Icon>
+                </Button>
+            </div>
         </section>
 
         <section className={classes.section}>

src/pages/page-2.js

@@ -16,7 +16,7 @@ const SecondPage = ({ classes }) => (
         <p>Welcome to page 2.</p>
         <p>
             This page has been styled using global CSS. This approach could be
-            used to style simple HTML markup, e.g. Markdown generated markup.
+            used to style simple HTML markup, e.g. markup generated by Markdown.
             Here's an example:
         </p>
 

src/styles/styles.css

@@ -0,0 +1,52 @@
+/* Apply a natural box layout model to all elements, but allowing components to change */
+html {
+    box-sizing: border-box;
+}
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
+/* Reset */
+html, body, div {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: #fafafa;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.87);
+
+    /* Helps fonts on OSX look more consistent with other systems */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Use momentum-based scrolling on iOS devices */
+    -webkit-overflow-scrolling: touch;
+}
+
+h1 {
+    margin: 0 0 .35em 0;
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 2.8125rem;
+    font-weight: 400;
+    line-height: 1.13333em;
+}
+
+h2 {
+    margin: 0 0 .35em 0;
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 1.3125rem;
+    font-weight: 500;
+    line-height: 1.16667em;
+}
+
+p {
+    margin: 0 0 1em 0;
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.46429em;
+}