Design

Updated: 2020-09-12

No, I know nothing about design. Thankfully we have some wonderful free tools and assets to make our website less 1990s.

UI Framework: Material-UI

Originally I used Bootstrap. Who didn't. I was trying NOT to use the styled components since they looked outdated and you can find them all across the web. Mostly I rely on the "12 columns" for the layout. I decided to get out of it after I adopted Gatsby, since Bootstrap was based on jQuery, which was awesome, however deprecated.

Then I tried to use the (relatively) new flex in CSS to do the layout, soon I realized that I'm not smart enough to correctly use it. Then I found Material-UI, which was based on React, could do a similar "12 columns" layout, and had a modern look (Google's Material Design https://material.io). The website is now in the process to migrate to it.

Install by

npm install @material-ui/core

Icons

Material-UI comes with a set of icons. They are in a separate package than core so you need to install by:

$ npm install @material-ui/icons

Then follow the guide: https://material-ui.com/components/icons/

Another good options is Font Awesome, which gives you more free icons. You can search by https://fontawesome.com/icons?d=gallery&m=free

Font

This website is using Roboto, which is a Google font. Gatsby has a plugin to make it easier to use Google fonts:

$ npm install gatsby-plugin-prefetch-google-fonts

Add this to the plugins list inside gatsby-config.js

{
  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
      {
        family: `Roboto`,
        variants: [`300`, `400`, `500`, `700`],
      },
    ],
  },
},