Figuring Out Gatsby #3 - Gatsby with Styled Components

This is part 3 of my Gatsby series. Check out the start for it to make more sense!

If you are here for the Gatsby and not the CSS, skip this one as this is all about getting our plain Gatsby pages looking a little nicer using modern approaches as we go.

If you can happily look at default HTML till you built all the functionality, I tip my metaphorical hat to you. For me, after a few hours I want to at least throw on a few different colours just to have something a little nicer to look at. So earlier in my projects I tend to start adding some CSS.

First of all, if you just want to create a CSS file in your layouts.js and link to it, you sure can. There is nothing stopping you in Gatsby. But like with a lot of Gatsby, there is a better way that allows Gatsby to do things smarter. For Gatsby to do that, it needs to be made aware of the CSS by importing it in specially.

There is lots of ways to do this:

• From your gatsby-browser.js file import a CSS file in /src/styles/
• CSS Modules, which is found on the Gatby site
• Styled Components, which we will focus on.

So lets think about the type of CSS we want to have in a typical app

1. Global Styles
2. Fonts/Typography
3. Layout Styling

Lets look at Global Styles first

Global Styles

Global Styles basically means Stuff that is used everywhere so this is where you might add things like:

• CSS Custom Properties for the colour palette
• Background settings
• Styling of commonly used elements like buttons, scrollbars

Obviously this varies depending on what you want to do so i'll focus in on what is different in Gatsby

Normalize.css

Before we do anything, a cool package to remove some annoying browser defaults is normalize.css This helps get rid of things like the html margin for example, that means that a full page app still leaves a little gap on the edges. To use it:

1. Install in npm: npm i normalize.css
2. Import it to layout.js: import 'normalize.css';

While we are installing things from npm don't forget to install styled-components too

GlobalStyles.js

For our actual GlobalStyles css we create a GlobalStyles.js file in /src/styles. There are some changes because we are using styled-components to a regular css file.

import { createGlobalStyle } from 'styled-components';
import background from '../assets/images/background.svg';

const GlobalStyles = createGlobalStyle`

//examples of what you might add to your styles

  :root {
    --text: 
  }

  html{ 
    font-size: 10px;
     background-image: url(${background});
  }
  .gatsby-image-wrapper img[src*=base64\\,] {
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
  }
`
export default GlobalStyles

Ok a few interesting things to discuss.

• import { createGlobalStyle } from 'styled-components' - Its how Global Styles are made in Styled components.

• import background from '../assets/images/background.svg' To allow gatsby to do its image magic we import our images in this way. More on that later, for now just assume it makes it better.

• const GlobalStyles = createGlobalStyle This lets us provide a CSS string to export out. In other works, this begins the CSS that can be written normally from this point`

• .gatsby-image-wrapper img ...stuff - This is Wes Bos's clever way of showing an image before its loaded. In this case it is a 64x64px version of the image so it 'unpixelates' when it loads.

Once you have sorted this out, you can import it into Layouts as a component, something like:

`

import React from 'react';
import Nav from './Nav';
import 'normalize.css';
import GlobalStyles from '../styles/GlobalStyles';

export default function Layout({ children }) {
  return (
    <>
      <GlobalStyles />
      <Nav />
      {children}
    </>
  );
}

Typography

Everyone loves working with text, since we are in a component mindset, we might as well have a seperate Typography file. Lets look at the basics focusing on the Gatsy/Styled Components specific things:

import { createGlobalStyle } from 'styled-components'; //import Global Style
import font from '../assets/fonts/ExampleFont.woff'; //Example Woff file.

const Typography = createGlobalStyle`
  @font-face {         
    font-family: ExampleFont;
    src: url(${font});
  }
  html {
  font-family: ExampleFont;
  color: var(--black);
}
`
export default Typography

So the above picks up a font in assets and then uses it across the app. Again, letting Gatsby 'know' about the font will give us benefits down the line. Other things you may want to consider in this file include:

• Font Sizing
• Letter spacing
• Backup Fonts
• Anchor tag styling
• Header Styling

If woff and font-face is a bit new to you, here is a good article
Once you are happy. Import the Typography component to Layouts and we got some nice text... or bad text, if your design skills need work! Hopefully this gets you into the flow of building up the CSS in this way.

Nav Styling, Scope it out.

So now we want to look at scoped styling, and the Nav we discussed in the previous chapter is a good place to look at.

Why scoped? Because the CSS we will write will only apply to that component. That means we can change whatever we like and we know it will only effect our Nav.

First we want to import the styled function from styled components:

import styled from 'styled-components'

Then, we create the styled tag:

const NavStyled = styled.nav` 
  background: purple;
`

Finally then rename our tag to

<NavStyled>
  //stuff
</NavStyled>

If thats all gone to plan, you will have a purple nav component. Which is great.

Now if you have elements inside of the component you want to style you can either:

1. Create Styled tags as above and rename
2. Or just select them in NavStyled as you would in regular CSS.

Number 1 is a good idea if you intend to reuse the Styled component in multiple areas but Number 2 is quick and easy, you can always covert it if need be.

Wrap Up

This is a fairly short one but hopefully enough to get you started with CSS in a scoped way, since its all very subjective I am assuming you can figure out what you want to do wit the snippet of knowledge contained above!