Build Status

Spark Design System

Welcome to the Spark Design System, a product of Quicken Loans.

Spark Design System is a system of patterns and components used to create the user interface for the Quicken Loans family of Fintech products.

Getting Started

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.

Spark

Contribution Guide

Code Organization

Spark is managed as a monorepo. All of the Spark source code lives in a single repo, but is released as separate packages using Lerna.

This repo consists of the design system packages, wrapped in an instance of Drizzle, a tool built by cloudfour, for displaying pattern libraries. Spark uses Drizzle for documentation and plain html code examples.

In the packages folder are Spark. These are the files that are published to npm.

Dev Environment

If you want to run a copy of Drizzle locally:

  1. Run npm install.
  2. Run gulp --dev.
  3. Open your browser to http://localhost:3000/.

Unit Tests

Spark uses the Mocha test framework with the Chai assertion library for unit tests. To run unit tests in Spark:

  1. Navigate to the root of the Spark repository.
  2. Run npm install if you have not already.
  3. Run npm test.
  4. See test output in terminal to determine number of passing or failed tests.

Code Style Standards

Spark follows specific coding styles for HTML, CSS and JavaScript to ensure maintainability and scalability. To successfully make a commit in this repo the code must pass the pre-commit hooks that will run automatically on commit. The pre-commit hooks run ESLint, Stylelint and an additional code formatter, prettier.

HTML

CSS

JS

Change Workflow

Coming Soon

Credit

Drizzle Drizzle Documentation