Skip to content

bluepeter/gatsby-material-ui-business-starter

Repository files navigation

Gatsby Material UI Business Starter

Check out the demo.

Stripped-down Gatsby small business starter that uses the well-maintained and beautiful Material UI React.js project. Fully configured to reliably work with this powerful library out-of-the-box, in PROD, and in DEV with hot-reloading.

screen shot 2019-01-19 at 12 48 22 am screen shot 2019-01-19 at 12 48 30 am screen shot 2019-01-19 at 12 48 42 am screen shot 2019-01-19 at 12 48 34 am

For something a bit simpler that also uses Material UI, check out our Tiny Agency starter.

Structure

  • Edit contact detail and menu items in gatsby-config.json.
  • Want to add a new product? Just add a new markdown file in products and it will automatically be included.

Styling

You can use CSS in two different ways:

  • Edit the Stylus file style.styl directly to add classes/etc. You can then adjust components to use these classes.
  • Use Material UI's withStyles() to override and dynamically set classes from within each component. For an example of how to do this, please see HomeFeatures.js, including getting and using theme colors.

You can adjust the theme palette colors in getPageContext.js.

Deployment

yarn

To build, watch for file edits and hot-reload, and run locally:

yarn run develop

To build for PROD:

yarn run build

While you could run gatsby commands directly, it is preferable to use yarn run (and see corresponding scripts in package.json) so as to avoid differences between local and global gatsby versions. (See the CLI instructions for more details.)