October 21, 2019
Time to read: 4 min
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.
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:
Links:
Gatsby has awesome and useful plugins. Here is some of them I used:
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:
<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>
//theme.js
export const theme = {
breakpoints: ['30em', '40em'],
}
//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>
//StyledBox.js
import { Box } from 'reflexbox/styled-components'
const StyledBox = styled(Box)`
width: 500px
background: red;
`
Links:
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: