I've built a couple different sites now with Gatsby: my own and my sister's portfolio sites. 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:
Gatsby + CodyHouse Starter
What is CodyFrame?
CodyFrame is a front-end framework, complete with CSS classes (both BEM and utility) and utility JavaScript, which has no dependencies (like jQuery). CodyFrame's benefit is enhanced with its optional components.
What are CodyHouse Components?
Components is a library of components built with CodyFrame in mind. The CSS and JS is easily dropped into any project using CodyFrame, making it easy to build a fully interactive web app. The JS in each component is plain JavaScript, ensuring that it will work with any framework -- including React and Gatsby.
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 componentDidMount and 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. 🤷♂️
Top comments (0)