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.