Dependencies

React, Gatsby, Prismic, Babel, React Helmet, Framer Motion, Styled Components, React Modal, React Intersection Observer.

—

Theme

src/style/theme.js

Customize these core variables in a single place. This theme module is consumed by the styled-components ThemeProvider and is usable in any react file with easy-to-use syntax. You can configure all of these variables to your liking, but here is how you can use them:

size and device

Use these to control common and repeatable breakpoints.

const Wrapper = styled.div`
  max-width: 100%;

  @media ${({ theme }) => theme.device.laptop} {
    max-width: 50%;
  }
`

colors

Setup any color to any element you choose.

const StyledElement = styled.p`
  color: ${({ theme }) => theme.colors.white};
  background-color: ${({ theme }) => theme.colors.black};
`

colorPlates

Use preconstructed color plates to manage combinations of colors.

const StyledPlate = styled.div`
  color: ${({ theme }) => theme.colorPlates.primary.foreground};
  background-color: ${({ theme }) => theme.colorPlates.primary.background};
  border: 1px solid ${({ theme }) => theme.colorPlates.primary.foreground};

  svg path { fill: ${({ theme }) => theme.colorPlates.primary.icon}; }
`

fonts

Font sizes for all breakpoints with the css clamp() function preset.

const Headline = styled.h2`
  font-size: ${({theme}) => theme.fonts.h1};
  line-height: 110%;
`

animation

A simple animation system for determining a scale of animation.

const AnimatedElement = styled.div`
  transition: opacity ${({theme}) => theme.animation.duration[100].css}
      ${({theme}) => theme.animation.timingFunction.css};
`

layout

Layout values to manage common areas of spacing and alignment.

export const Wrapper = styled.section`
  padding: unset ${(props) => props.theme.layout.outerWrapperMobile};

  @media ${(props) => props.theme.device.tablet} {
    padding: unset ${(props) => props.theme.layout.outerWrapper};
  }
`

Base Styles

src/style/base-styles.js

exported objects that define base styles include size, device, colors, fonts, animation, and layout. This theme data lives in the styled-components ThemeProvider context. Inject new styles here to be included in the global stylesheet.

—

Motion

src/components/motion

Awesome components with motion built in to make things move.

motion-box

MotionBox uses react-intersection-observer and framer-motion to handle containers appearing on scroll.

Variants of MotionBox include ImageBox that wraps gatsby-image in a MotionBox and VideoBox that wraps an inline video player in a MotionBox.

motion-headline

This component animates headlines in one word at a time using react-intersection-observer and framer-motion.

motion-scroll-transform

Use framer-motion to handle containers animating in/out on scroll at given thresholds.