I’ve built a couple different sites now with Gatsby: the one you’re reading now and my sister’s portfolio site, LydiaRoseEiche.com. I built them both using CodyHouse’s CSS framework CodyFrame, but the process to build each has been a little bit of a learning experience. I wanted to take that experience and generalize it for future use, both for myself and for anyone else who wanted it. To that end, I’m happy to announce:
What is CodyFrame?
What are CodyHouse Components?
Using a component with Gatsby
I recommend following CodyHouse’s directions for including Components within React. With regard to this starter, a new component file can be created within the
src/components directory. The SCSS code would be placed inside a new include created inside the
src/styles/components directory, and don’t forget to update the
_index.scss file in there! Place the JS code in its own file in
static/js, and follow the CodyHouse directions for creating/removing the script element in the component’s
componentWillUnmount functions, respectively.
Optionally use with PurgeCSS
The starter also includes a commented-out section in the
gatsby-config.json file, which can be uncommented to enable using PurgeCSS. Keep in mind that this is not a zero-config option; each use-case will differ, so be sure to follow the plugin directions for fine-tuning the configuration.
Under normal circumstances, I would also submit this starter to Gatsby’s official starters page. They’re currently not accepting any new submissions, so I’ll have to wait to do that. 🤷♂️