Gatsby Starter Styleguide

Overview:

The @lekoarts/gatsby-theme-styleguide is a Gatsby theme that allows users to create a styleguide page based on their Theme UI configuration. It is a zero-config theme that provides a beautiful display of the Theme UI configuration. The theme utilizes the @lekoarts/gatsby-theme-specimens under the hood and offers features such as displaying colors, typography, and spacing scale. Users can also extend their styleguide page by using components from @lekoarts/gatsby-theme-specimens.

Features:

• Automatic styleguide based on your Theme UI configuration: The theme automatically generates a styleguide page based on the user’s Theme UI configuration.
• Displays colors, typography, and spacing scale: The styleguide page displays individual and palettes of colors, font family, weights, sizes, headings, and a spacing scale.
• Uses @lekoarts/gatsby-theme-specimens: The theme utilizes components from @lekoarts/gatsby-theme-specimens, allowing users to extend their styleguide page.

Installation:

To install the @lekoarts/gatsby-theme-styleguide theme, follow the steps below:

1. Create a new Gatsby site using the Gatsby CLI:

gatsby new my-styleguide https://github.com/gatsbyjs/gatsby-starter-hello-world
cd my-styleguide

2. Install the theme and its dependencies:

npm install @lekoarts/gatsby-theme-styleguide

3. Configure the theme by adding it to your gatsby-config.js file:

module.exports = {
  plugins: [
    {
      resolve: "@lekoarts/gatsby-theme-styleguide",
      options: {
        // Add theme options here
      },
    },
  ],
};

4. Start customizing your site by modifying the code in the src folder.
5. Run the site locally:

npm run develop

6. Access your site at http://localhost:8000.

For more customization options and instructions on shadowing components, refer to the theme’s README and files.

Summary:

The @lekoarts/gatsby-theme-styleguide is a powerful Gatsby theme that simplifies the creation of styleguide pages based on Theme UI configurations. It offers automatic styleguide generation and provides a beautiful display of colors, typography, and spacing scale. With the ability to extend the styleguide using components from @lekoarts/gatsby-theme-specimens, users have the flexibility to customize their styleguide page according to their needs. Overall, this theme is a great choice for developers looking for a streamlined way to showcase their Theme UI configuration.