What I learnt doing website on Gatsby

In following post I am going to describe experience building website using GatsbyJS and sharpening skills in React. I discovered a lot of interesting features doing personal website.

In this post I will try to describe and document things I learnt so far.

GatsbyJS

First of all I need to describe experience using Gatsby framework and its plugins.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

IMHO Gatsby has a easy learning curve and really good documentation. Here should be a big applause for it. GatsbyJS is powered by GraphQL which allows developer using custom graph queries to define and using for filtering, rendering on website. Here is just a short list of which queries I used for:

• siteMetadata
• Markdown files
• Filtering queries for templates
• Defining featured image for posts

Links:

• Gatsby

Gatsby plugins

Gatsby has awesome and useful plugins. Here is some of them I used:

• gatsby-source-filesystem
• gatsby-plugin-styled-components

• gatsby-transformer-remark

  • gatsby-remark-images
  • gatsby-remark-prismjs
• gatsby-plugin-sharp
• gatsby-plugin-manifest
• gatsby-plugin-offline
• gatsby-plugin-react-helmet

Reflexbox

In the beginning I thought which grid system to use and of course I thought about Bootstrap but I wanted to use something new and interesting to expand some knowledge about others systems. Then I found Reflexbox by Rebass.

📦 Ergonomic, responsive React layout and grid system. The original Box component™ since 2015

It is a fully customizable grid system and fully compatible with Styled System, Theme UI and Styled Components. I choosed using Styled Components for my use case.

Also there are to 2 layout components such as Box and Flex.

Box is responsive box-model layout component. Flex is responsive flexbox layout component. For example, if you want to use simple block component you should use Box, but if you want to expand layout model to be flexible use Flex

<Flex flexWrap="wrap">
  <Box p={3} width={1 / 2} color="white" bg="primary">
    Flex
  </Box>
  <Box p={3} width={1 / 2} color="white" bg="secondary">
    Box
  </Box>
</Flex>

Futhermore this library has some very cool features like:

• setting any proportion to the columns

<Box width={[1, 1 / 3, 1 / 2 ]}>
    <h1>Hello, World!</h1>
</Box>
<Box width={[1, 2 / 3, 1 / 2]}>
    <p>
    Welcome on board, Mr.Doe!
    </p>
</Box>

• easy setting of custom breakpoints

//theme.js
export const theme = {
  breakpoints: ['30em', '40em'],
}

• ability to pass properties in array for appropriate breakpoint.

//index.js
<Box px={[0, 3]}>
    <img src={avatar} alt="My avatar" />
</Box>
<Box px={[0, 3]} py={[3, 0]}>
    <p>
    This is plain paragraph
    </p>
</Box>

• compatibility with Styled Components

//StyledBox.js
import { Box } from 'reflexbox/styled-components'

const StyledBox = styled(Box)`
    width: 500px
    background: red;
`

Links:

• Reflexbox
• Flexbox Grid
• Styled Components

Typography.js

i believe that typography is a very crucial part of design. It is going to look different every time you choose different typography.

The secret to good design os locked within typography - Chris Do

I was looking for some way to unify typography on website. And I found a solution for this issue. My choice fell on Typograhy.js

Typography is a complex system of interrelated styles. 100s of style declarations on dozens of elements must be in harmonious order.

Typography.js has around 30 themes to apply and they are easy to customize. So far, I assume, I use this tool on very basic level.

Links:

• https://kyleamathews.github.io/typography.js/