If you want to make changes, improvements, or add new functionality to the website, you don’t have to set up the full Gatsby repo to contribute. You can spin up your own instance of the Gatsby website with these steps:
- Clone the Gatsby repo and navigate to
yarnto install all of the website’s dependencies.
npm run developto preview the site at
Note: If you are experiencing issues on a Linux machine, run
sudo apt install libvips-dev, to install a native dependency. You can also reference Gatsby guide on Linux for other Linux-specific requirements.
Now you can make and preview your changes before raising a pull request!
For full repo setup instructions, visit the code contributions page.
Styles on the site are applied using Theme-UI, which allows for theming across the site based on design tokens (also called variables).
Design tokens are used to consolidate the number of colors and style attributes that are applied to components throughout the site. By limiting the styles that can be applied, the site stays consistent with the guidelines for color, typography, spacing, etc.
Tables listing design tokens that are used on the site can be found in the design guidelines.
sx prop from Theme-UI allows you to access theme values to style elements and components, it should be used wherever possible. The prop is “enabled” by adding
theme-ui’s JSX pragma at the top of a
It is still okay to directly import tokens, e.g.
colors directly from
www/src/gatsby-plugin-theme-ui if it helps your specific use case — for example when global CSS is required, when passing theme values to other libraries or plugins, when authoring complex responsive styles, etc.