gatsby-theme-catalyst-design-system

Extends the base catalyst themes for Gatbsy to add in a design system

Usage no npm install needed!

<script type="module">
  import gatsbyThemeCatalystDesignSystem from 'https://cdn.skypack.dev/gatsby-theme-catalyst-design-system';
</script>

README

[WIP] Gatsby Theme Catalyst Onepage

Smarter, Faster, Easier

Currently a work in progress - please be aware that there are rapid breaking changes at this point in the development. Not currerntly recommended for use.

The Catalyst series of themes and starters for GatsbyJS were designed to provide an opinoinated set of progressive themes and starters that can be used to accelerate web development. I built this to meet my own needs and imagine that others would also have similar needs.

Catalyst Themes and Starters

Dependencies

Shadowed Components

The following components (other than theme-ui) are modified from gatsby-theme-catalyst-core:

src/gatsby-theme-catalyst-core/components/nav.js

The main change in this theme is modification of the navigation element to provide built in support for single page scrolling navigation use react-anchor-link-smooth-scroll and react-scrollspy. This allows the theme to track where the user is on the page and also to provide a smooth scrolling experience. The navigation menu is automatically created from the gatsby-config.js file using the anchorLinks array. There is not currently support for blended anchor links and standard internal links in the Nav menu however this is a planned feature.

Installation and Use

Quick Start

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying a catalyst based starter, the themes will be included by deafult in the dependencies.

    # create a new Gatsby site using the catalyst onepage starter site
gatsby new my-catalyst-starter-onepage https://github.com/ehowey/gatsby-starter-catalyst-onepage

  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd my-catalyst-starter-onepage/
gatsby develop

  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open the my-catalyst-starter directory in your code editor of choice and edit src/pages/index.mdx. Save your changes and the browser will update in real time!

You can read more about using starters in the official documentation.

Custom Starter Development Using Catalyst Themes and Yarn Workspaces

For more advanced users who want to dig into the guts of the themes and create their own starters the easiest way to do this is via Yarn workspaces. You will also want to read through the themes documentation.

Next Steps

This is a passion project for me. I would love any additional feedback, suggestions and pull requests. I can be contacted via email at: eric@erichowey.dev