Skip to content

An opinionated set of integrated themes and starters as a boilerplate to accelerate development with GatsbyJS

License

Notifications You must be signed in to change notification settings

techfg/gatsby-theme-catalyst

 
 

Repository files navigation

Gatsby Theme Catalyst

Gatsby Theme Catalyst

Accelerate your next Gatsby project
www.gatsbycatalyst.com

npm PRs Welcome

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 for styling and MDX or SANITY.io for content.

Tests

Test Core Theme Test Basic Theme Test Sanity Theme
Test Blog Theme Test Bery Theme Test Helium Theme
Test Hydrogen Theme Test Lithium Theme

Catalyzing Start

   # create a new Gatsby site using the basic starter
    gatsby new catalyst 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.mindmapbc.ca - Based on gatsby-starter-catalyst-sanity, a fully custom website and PWA using gatsby-theme-catalyst as a development base.
  • www.gatsbycatalyst.com - Based on gatsby-starter-catalyst and gatsby-theme-catalyst-header-side with a custom index page.

🚀 Getting Started

https://www.gatsbycatalyst.com/docs/getting-started

📖 Docs

https://www.gatsbycatalyst.com/docs/

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, data sources or styling. Some themes are intentionally raw and unstyled focusing instead on the data layer or extending specific functionality, e.g. gatsby-theme-catalyst-sanity. Some themes focus on adding a specific layout feature, e.g. gatsby-theme-catalyst-header-top. Still other themes are more refined and styled focuse on bundling together a set of themes closer to what you might have in a final production website, e.g. gatsby-theme-catalyst-bery.

Starter sites to extend and style the themes

The starter sites provide a "quick start" for project development using the themes as dependencies. Some starters are intentionally a "blank canvas" for a totally custom project while other starters are much more polished requiring fewer changes before being production ready.

Available 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.
gatsby-theme-catalyst-lithium gatsby-starter-catalyst-lithium This is a structurally similar theme to helium but visually distinct. It is also 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.
gatsby-theme-catalyst-bery gatsby-starter-catalyst-bery This is a peronal blog using SANITY.io as a datasource. Features a more minimal design that highlights written content. Features RSS feed, social sharing support, sortable blog categories. This is also an example of escaping from some features of Gatsby Theme Catalyst to create a custom header component.

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.

Thank-you to all of the contributors that have already helped to make this project great!

I can be contacted via email at: [email protected] 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.

About

An opinionated set of integrated themes and starters as a boilerplate to accelerate development with GatsbyJS

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%