How to create a Gatsby Blog - Part 3 (Styling our App)

Posted by : at

Category : react   gatsby


This is a part of a series - How to Create a Gatsby Blog from Scratch

Part 3 - Styling Our App

We gonna use CSS-in-JS for styling, for that we gonna use Styled-Components library

  1. Setting up Styled Components

We need to install the styled-components dependencies and the gatsby plugin for styled-components

If you are using npm :

$ npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

If you are using yarn :

$ yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components

And then add the plugin to gatsby-config.js


module.exports = {

  plugins: [`gatsby-plugin-styled-components`],

}

Lets now modify our Header Component using Styled Components

Modify the header.js


import { Link } from "gatsby"

import PropTypes from "prop-types"

import React from "react"

import styled from "styled-components"

import Navlink from "./navlink"

const HeaderContainer = styled.div`

    background-color: #111;

    height: 60px;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    `

const LogoContainer = styled.div`

    width:auto;

    float: left;

    padding-left: 20px;

    padding-right: 20px;

    padding-top: 10px;

    `

const LogoTitle = styled.h1`

    color: #111;

    font-size: 28px;

    `

const NavlinkContainer = styled.ul`

  list-style: none;

  float: right;

  padding-left: 10px;

  padding-right: 10px;

  padding-top: 14px;

`

const StyledLink = styled(Link)`

  color: #fff;

  text-decoration: none;

`

const Header = ({ siteTitle }) => (

  <HeaderContainer>

    <LogoContainer>

      <LogoTitle>

        <StyledLink to="/">{siteTitle}</StyledLink>

      </LogoTitle>

    </LogoContainer>

    <NavlinkContainer>

      <Navlink to="/">Home</Navlink>

      <Navlink to="/about">About</Navlink>

      <Navlink to="/contact">Contact</Navlink>

    </NavlinkContainer>

  </HeaderContainer>

)

Header.propTypes = {

  siteTitle: PropTypes.string,

}

Header.defaultProps = {

  siteTitle: ``,

}

export default Header

To modify the Navlink Component, we need to modify navlink.js


import { Link } from "gatsby"

import React from "react"

import styled from "styled-components"

const NavList = styled.li`

     display: inline-block;

     margin-right: 1rem;

 `

const StyledLink = styled(Link)`

    color: #fff;

    text-decoration: none;

    font-family: verdana;

`

const Navlink = props => (

      <NavList>

      <StyledLink to={props.to}>{props.children}</StyledLink>

      </NavList>

)

export default Navlink

Also we can a global stylesheet, which will be affected globally. So lets create a new file inside src/styles/global.css

global.css


html {

  padding:0px;

  margin: 0px;

  background-color: #f4f4f4;

}

and we need to add the reference to stylesheet in gatsby-browser.js


/* Our App's Global Stylesheet */

import "./src/styles/global.css";

Great ! You have enabled styled components in your app. We have styled our Header.

Lets now create a Jumbotron Component

Create a new component jumotron.js


import { Link } from "gatsby"

import React from "react"

import styled from "styled-components"

const JumbotronContainer = styled.div`

  text-align: center;

  height: 400px;

  padding-top: 150px;

  padding-bottom: 50px;

  background-color: #fff;

  color: #3a3535;

`

const JumbotronHeading = styled.h1`

   font-size: 30px;

   font-family: verdana;

   font-weight: 100;

`

const JumbotronSubHeading = styled.p`

    font-size: 20px;

    font-family: verdana;

    font-weight: 100;

`

const JumbotronButton = styled.button`

  background-color: #ff7315;

  color: #fff;

  display: inline-block;

  text-decoration: none;

  font-weight: bold;

  padding: 10px 40px;

  font-size: 20px;

  font-family: verdana;

  font-weight: 100;

  box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 0.5);

  border: 1px solid #2d6898;

`

const JumbotronButtonLink = styled(Link)`

    color: #111;

    text-decoration: none;

`

const Jumbotron = ({heading , subheading, buttontitle, buttonlink }) => (

     <JumbotronContainer>

        <JumbotronHeading> {heading} </JumbotronHeading>

        <JumbotronSubHeading> {subheading}</JumbotronSubHeading>

        <JumbotronButton><JumbotronButtonLink to={buttonlink}>{buttontitle}</JumbotronButtonLink></JumbotronButton>

     </JumbotronContainer>

)

export default Jumbotron

Lets now import this component to our homepage i.e index.js


import React from "react";

import Jumbotron from "../components/jumbotron";

import Layout from "../components/layout";

import SEO from "../components/seo";

const IndexPage = () => {

    return (

      <>

        <Layout>

          <SEO title="Home"></SEO>

          <Jumbotron

              heading="Hello World !"

              subheading="This is sub heading "

	      buttontitle="Explore Our Projects"

              buttonlink="/projects"

          >

          </Jumbotron>

        </Layout>

      </>

    )

}

export default IndexPage

Awesome :D Lets now modify the styles of our Footer components too

footer.js


import PropTypes from "prop-types"

import React from "react"

import styled from "styled-components"

const FooterContainer = styled.footer`

   text-align: center;

   padding-top:20px;

   padding-bottom: 20px;

`

const FooterText = styled.p`

   font-family: verdana;

   font-size: 15px;

`

const Footer = ({ siteFooter }) => (

  <FooterContainer>

    <FooterText> {siteFooter}</FooterText>

  </FooterContainer>

)

Footer.propTypes = {

  siteFooter : PropTypes.string,

}

Footer.defaultProps = {

  siteFooter: ``,

}

export default Footer

Great we have our component styles implemented. In the next part we will be implement our Blog ! Stay Tuned