This is the source code for the scampersand.com website.
Gatsby is a react-powered static site generator. It renders each file in pages as a route, and uses graphql to fetch data from a variety of sources, for example site metadata, blog entries in markdown, or a directory of images.
Emotion is a css-in-js library (see mxstbr's article below). It works with string or object-based css in components, turning those into styles and referring to them via classes. Since emotion is generating classes for styles, components need to make sure to pass through props.className
Styled-system is a way of mapping
props to a design system. The system is described in a theme object, then
properties are converted to styles, for example mx={2} looks up the third
element in theme.space so the element gets margin-left and
margin-right from a site-wide spacing scale.
Rebass v3 is a set of eight foundational components built with styled-system: Box, Flex, Text, Heading, Button, Link, Image, and Card. Our site components are based on these, but Rebass is also a great reference for how to work with styled-system in general.
Typography.js is a JS lib
that takes a base font size and line height, and generates a typographical
theme from them. Under the hood, it depends on Compass Vertical
Rhythm.
Fully envisioned, typography.js generates a blob of CSS that implements an
entire theme. We’re not using the CSS blob generated by typography.js, but
we’re still using its rhythm function in our styled-system theme.
- single element pattern
- merge className properly
- pass through props
- receive the underlying HTML element as a prop
- big change from rebass v2 to v3
- regarding the ‘as’ prop in styled-components
- mxstbr on CSS in JS
- varun’s intro to styled-system
- jxnblk patterns for style composition in react