Design Systems are for People.
Fractal based styleguides consist of two parts: Components and Documentation. The Documentation part is for the design concepts. The Components part holds the actual components.
The documentation is written in Markdown. The components are Handlebars files.
To write Markdown, use your favorite text editor (e.g. Atom) with a markdown plugin, or an online editor like Dillinger.
This guide is based on Fractal. The component structure is based on the GE Predix Design system. The documentation structure is based on the Salesforce Lightning Design System with a bit of Shopify Polaris sprinkled in.
Visualize changes by comparing screenshots of the components. This functionality is provided by BackstopJS.
You can compare the current state to the latest built state.
- Make sure you have a local build by running
npm run build. - Create reference screenshots by running
npm run visual-reference. - To create the diffs, run
npm run visual. Make sure the local server is running. - Optionally update the references with the new state by running
npm run visual-approve.
The backstop configuration is in the folder tests/backstop/config.js.
Node.js 6.9 or higher is required.
Run npm install.
To simplify the creating of new components install the fractalcomp package.
Run npm start.