Style Guide

Powered by Gatsby, MDX and Theme UI

Summary

Emulsify Design System contains a fully customizable/theme-able style guide generator built with Gatsby. It reads your documentation and component library and builds a style guide for you. Using MDX you can author custom documentation for your components as well as any other pages for your design system audience.

Setup

Installation

Quickstart

Use the Gatsby starter.

Manual Installation

As per Gatsby theme best practices, this repo is a Yarn workspace containing the Gatsby theme as well as an example directory to see how to use it in a project.

To install just the Gatsby theme in your project, run:

npm i gatsby gatsby-theme-emulsify

Setting up Basic Site Information

Create a local gatsby-config.js file (see the example one for documented options) and enter your basic site information in the siteMetadata fields.

See Style Guide Usage for further info: