Welcome to the Spark Design System, a product of Rocket Mortgage.
Spark Design System is where we collect our best solutions for how to design and build unified digital experiences for the Rocket brands.
Spark assumes your project is using Sass for styling and also that your project has a JavaScript build step that will transpile ES6+ and polyfill appropriately for browser support.
Install the npm package.
npm install --save-dev @sparkdesignsystem/spark
Import the Sass setup file in your Sass build.
@import "node_modules/@sparkdesignsystem/spark-styles/spark.scss";
This will bring all Spark Sass patterns into your build. The Spark classes are namespaced so they don't affect any existing CSS.
Import the JS setup file in your JS build.
import spark from "node_modules/@sparkdesignsystem/spark/spark";
This will bring all Spark JS into your build.
Spark is managed as a monorepo. All of the Spark source code lives in a single repo, but is released as separate packages.
This repo consists of the design system packages, wrapped in an instance of Gatsby. Spark uses Gatsby for our main documentation site and Storybook for our component previews and developer documentation.
In the root there are three directories, react
, angular
and html
. These house the files
that are published to npm.
If you want to run a copy of Gatsby locally:
npm install
.npm start
.http://localhost:8000/
.If you want to run a copy of Gatsby and Storybook locally:
npm run installall
.npm start
to start Gatsby then open your browser to http://localhost:8000/
.(cd react/ ; npm run storybook)
to start Storybook for React.(cd angular/ ; npm run storybook)
to start Storybook for Angular.(cd html/ ; npm run storybook)
to start Storybook for HTML.Spark uses the Jest test framework for unit tests. To run unit tests in Spark:
cd react
, cd angular
, or cd html
.npm install
if you have not already.npm test
.Spark follows specific coding styles for HTML, CSS and JavaScript to ensure maintainability and scalability.
additionalClasses
properties use the naming convention elementAdditionalClasses
for other elements that we offer additional classes support on besides the main element.Coming Soon