Getting Started With Gatsby.js - Part 2

In this tutorial you will be Learning

• Styling Gatsby Website
• CSS in Gatsby
• Gatsby Plugins

Difficulty

• Basic

Tutorial Contents

Before Starting the tutorial we will go through the Part 1 again as a part of Recap, so in Part 1 we have learnt about the directory structure of the Gatsby Directory, Helmet Component which attached all the header meta information like description, keywords to your generated HTML file. A lot of Components like TemplateWrapper, Link, IndexPage etc.

You might be thinking that what is the use of Components and why its necessary. The answer of this question is the code architecture is simplified for building large websites because then you get some part of the code which can be reused as well as keeping it as simple as possible.

So a simple example for a Component would be a LinkButton. For creating a link button we would have been using a tag and add a href, with some text inside it. Since we are talking about components the best is to create a LinkButton component and whenever we will be using it use it like This is a LinkButton Component. Thus your website will be made of components and it is a building block of your Website.

Styling Gatsby Website & CSS in Gatsby

Since most of us are familiar with CSS, we will be looking at one of the library which Gatsby Provides and that will help us to do styling in Gatsby. We will be using Glamor which helps you to write CSS diretly in your components. The advantage of using it is that it helps in resolving th name conflict which we often encounter in normal CSS thus no need to write !important to fix any issue. Since all the CSS elements are tightly coupled with their components it makes it easier to edit those rather than thinking where all the components are being used.

At first we will install the plugin as npm install --save gatsby-plugin-glamor and then add it to the gatsby-config.js as shown below :

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: ['gatsby-plugin-react-helmet', 'gatsby-transformer-json', 'gatsby-plugin-glamor'],
};

In the below code we are using the Glamor where we are writing the inline CSS inside the div element

import React from "react"
const UtopianMod = p =>
  <div
    css={{
      display: `flex`,
      alignItems: `center`
    }}
  >
    <div css={{ flex: 1, marginLeft: 20, padding: 15 }}>
        {p.modname} : {p.modcategory}
    </div>
  </div>
export default () => <div>
    <h1>Utopian Moderator</h1>
    <UtopianMod
      modname="Coding Defined"
      modcategory="Review's Development and Bugs"
    />
    <UtopianMod
      modname="ABC"
      modcategory="Review's XYZ and PQR"
    />
</div>

When you run it, it will be shown as where you can see all the css has different tag attached to it, thus making it really easy to update it.

Now there is one more option for you if you do not like to use Glamor and that is Styled Components. In styled Components you can write actual CSS element inside your Components and not like Glamor where you will write CSS in the property. It also has the same advantage as Glamor where it helps in resolving the name conflict which we often encounter in normal CSS thus no need to write !important to fix any issue. Since all the CSS elements are tightly coupled with their components it makes it easier to edit those rather than thinking where all the components are being used.

For working on it you need to install two plugins gatsby-plugin-styled-components and styled-components as shown below npm install --save gatsby-plugin-styled-components styled-components

Similarly you need to add it in gatsby-config.js and also styled-components is to be imported in your file. Now lets say we want our modname and modcategory should be different, so we will write ModWrapper, Modname and ModCategory component and just change the normal CSS with the component.

const ModWrapper = styled.div`
  display: `flex`,
  alignItems: `center`
`;
const Modname = styled.h2`
  margin: 0 0 15px 0;
  padding: 0;
`;
const Modcategory = styled.div`
  flex: 1;
  margin-left: 20px;
  padding: 15px;
`;
const User = p => (
  <ModWrapper >
      <Modname >{p.modname}</Modname >:
      <Modcategory >{p.modcategory}</Modcategory >
  </ModWrapper >
);

Gatsby Plugins

Gatsby Plugins are small amounts of JavaScript code which is created by the community members which can be used when you are building Gatsby Sites. There are a lot of plugins available, even though if you like your own plugin you can create that just by writing your own Javascript code. The plugins are easy to install and use thus you do not have to reinvent the wheel of writing everything of your own.

To install any plugins at first you need to have a npm installed, then you can install it using the command npm install --save gatsby-transformer-json where gatsby-transformer-json is a plugin for parsing raw JSON strings into JavaScript objects from JSON files.

Next you need to add it to the gatsby-config.js file as shown below

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: ['gatsby-plugin-react-helmet', 'gatsby-transformer-json'],
};

Curriculum

• Getting Started With Gatsby.js - Part 1