Spark is currently in alpha. It is subject to changes of all sizes at any time and not suitable for production use. Please reach out to the Spark team for guidance.

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.

Spark's patterns are separated into two groups:

Getting Started

Spark assumes your project is using Sass for styling and that your project has a Javascript build step that will transpile ES6+ and polyfill appropriately for browser support.

Spark Core

Spark Extras

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-Core and Spark-Extras. 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/.

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

JavaScript

Change Workflow

Coming Soon

Credit

Drizzle