https://github.com/scampersand/scampersite-gatsby

scampersand.com using gatsby
https://github.com/scampersand/scampersite-gatsby

emotion gatsby-site react rebass static-site

Last synced: 9 days ago
JSON representation

scampersand.com using gatsby

• Host: GitHub
• URL: https://github.com/scampersand/scampersite-gatsby
• Owner: scampersand
• License: mit
• Created: 2018-12-20T16:52:51.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-04T23:11:30.000Z (10 months ago)
• Last Synced: 2024-11-07T05:42:23.569Z (about 2 months ago)
• Topics: emotion, gatsby-site, react, rebass, static-site
• Language: JavaScript
• Homepage: https://scampersand.com
• Size: 8.95 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Scampersite

This is the source code for the scampersand.com website.

## Ecosystem

[Gatsby](https://www.gatsbyjs.org/docs/) 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](https://emotion.sh/docs/introduction) 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](https://jxnblk.com/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](https://rebassjs.org/getting-started) 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](https://github.com/rebassjs/rebass/blob/master/src/index.js)

for how to work with styled-system in general.

[Typography.js](https://kyleamathews.github.io/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](http://compass-style.org/reference/compass/typography/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.

## References

- [single element pattern](https://medium.freecodecamp.org/introducing-the-single-element-pattern-dfbd2c295c5d)

  - merge className properly

  - pass through props

  - receive the underlying HTML element as a prop

- [big change from rebass v2 to v3](https://github.com/rebassjs/rebass/pull/474)

- [regarding the ‘as’ prop in styled-components](https://github.com/styled-components/styled-components/issues/1981)

- [mxstbr on CSS in JS](https://mxstbr.blog/2016/11/inline-styles-vs-css-in-js/)

- [varun’s intro to styled-system](https://varun.ca/styled-system/)

- [jxnblk patterns for style composition in react](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/)