Gatsby Theme Catalyst
www.gatsbycatalyst.com
Accelerate your next Gatsby project
Gatsby Theme Catalyst is an an opinionated set of integrated themes and starters that can be used as a boilerplate to accelerate your next Gatsby project. There is a single "core" theme in which most dependencies and utility components are contained followed by progressively more styled and refined child themes and starters. These themes use Theme-UI and MDX.
Catalyzing Start
# create a new Gatsby site using the basic starter
gatsby new catalyst https://github.com/ehowey/gatsby-starter-catalyst
# change into your new directory
cd catalyst
# launch the site
gatsby develop
Example sites built with Gatsby-Theme-Catalyst:
- www.erichowey.dev - Based on
gatsby-starter-catalyst-blog
, Github Repo - www.briannasharpe.com - Based on
gatsby-starter-catalyst-hydrogen
, Github Repo - www.gatsbycatalyst.com - Based on
gatsby-starter-catalyst
andgatsby-theme-catalyst-header-side
with a custom index page.
🚀 Getting Started
https://www.gatsbycatalyst.com/docs/getting-started
📖 Docs
https://www.gatsbycatalyst.com/docs/
List of themes
Theme | Demo | Description |
---|---|---|
gatsby-theme-catalyst-core | gatsby-starter-catalyst-core | This acts as the core theme on which all other themes are based. It houses a basic site architecture and components along with most commonly needed dependencies. Think of this as the foundation of a home. |
gatsby-theme-catalyst-header-top | gatsby-starter-catalyst | This adds a simple header to the core theme which includes support for anchor links and smooth scrolling out of the box. Logo on the left, nav on the right. |
gatsby-theme-catalyst-header-bigtop | gatsby-starter-catalyst-helium | This adds a vertivally stacked header with logo on top, title and then nav below, designed to be customized with variants. |
gatsby-theme-catalyst-header-side | gatsby-starter-catalyst-blog | This adds a sidebar style header to the core theme which includes support for anchor links and smooth scrolling out of the box. Logo is stacked on top, then title, then nav. |
gatsby-theme-catalyst-footer | gatsby-starter-catalyst | This adds a very basic footer to the core theme. |
gatsby-theme-catalyst-blog | gatsby-starter-catalyst-blog | This provides a basic plug-and-play blog for any Catalyst based site. |
gatsby-theme-catalyst-sanity | gatsby-starter-catalyst-sanity | This is a base theme for SANITY.io integration with catalyst themes and starters. |
gatsby-theme-catalyst-hydrogen | gatsby-starter-catalyst-hydrogen | This is a complete site using the Catalyst set of themes. Designed to be used by a freelance writer as their portfolio. SANITY.io is used as a CMS. |
gatsby-theme-catalyst-helium | gatsby-starter-catalyst-helium | This is a personal blog starter using the Catalyst set of themes as a base. Features large images, SEO optimization, social sharing support. Content is authored in MDX and git is used as the CMS. |
Philosophy
Less is more
Simple Core Theme
gatsby-theme-catalyst-core
was designed and built to be as simple and unstyled as possible. A barebones starting point which can be easily maintained in the future to manage dependencies on client sites.
Child themes to extend the core theme
These child-themes are focused on extending function and remain as design-agnostic as possible. Again this makes longterm maintenance easier for client sites. It is my preference to begin new projects without too much styling that has to be undone.
Starter sites to extend and style the themes
The starter sites provide a "quick start" for site development using the themes as dependencies. Currently the starter sites only provide basic implementation of the themes. It is my vision however that in time there could be more styled and complex starters released which do not need as much customization and include more rigid styling.
Contribution
This is a passion project for me that I work on in my spare time. I would love any additional feedback, suggestions and pull requests. Contributions are welcomed and encouraged.
I can be contacted via email at: eric@erichowey.dev if you have questions.
Acknowledgements
I would like to acknowledge all of the help I have gotten in working on this project from people answering questions on the GatsbyJS issues, Chris Biscardi's blog, and the work that @4lpine and @jxnblk have done documenting Theme-UI so well.
The vision for this set of themes was heavily influenced by WP Rig and Underscores from the Wordpress world. My hope was to create a similar kind of simple boilerplate that could be used as a jumping off point for custom work.