Spark Design System
Clone or download
afebbraro Merge pull request #905 from afebbraro/class-table
add new optional var and modifier table to spark components
Latest commit bbd4c09 Dec 7, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update CODEOWNERS Jun 11, 2018
docs renamed notes to description Apr 30, 2018
gulp resolve conflicts Nov 26, 2018
packages add vars to inputs, remove unused settings vars Dec 7, 2018
src add vars/class table to inputs Dec 7, 2018
tests resolving conflicts Oct 4, 2018
wraith upping the threshold and adding the rest of the paths Jun 13, 2018
.babelrc initial upload of base drizzle project Aug 10, 2016
.editorconfig initial upload of base drizzle project Aug 10, 2016
.eslintignore adding angular to eslintignore for now Jun 21, 2018
.eslintrc updates for airbnb eslint Mar 21, 2018
.gitignore moving coverage reports into the library folders Sep 26, 2018
.nvmrc updating nvmrc for netlify Oct 31, 2018
.prettierrc.json all the linting and prettying Feb 6, 2018
.stylelintrc disabling stylelint rule to allow prettier multiline declarations Aug 23, 2018
.travis.yml testing 2 Oct 18, 2018 Add Code of Conduct Feb 6, 2018 fixes after review Jun 29, 2018
LICENSE updated readme, fixed sass imports, updated urls in package.jsons Sep 26, 2017 remove beta info from readme Jun 25, 2018
_redirects adding redirect file for netlify (fall -> staging) Oct 18, 2018
config.js Merge branch 'staging' of… Oct 22, 2018
gulpfile.js added missing step for dev-all and dev-spark-angular Nov 14, 2018
lerna.json updates before publishing a bug fix Sep 21, 2018
package-lock.json added missing step, removed spark as deps Nov 14, 2018
package.json added missing step, removed spark as deps Nov 14, 2018

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.

Spark's patterns are separated into two groups:

  • Spark-Core contains the basic patterns and components that make up the visual and interaction design of the Quicken Loans family of Fintech products. If your application is expected to look and behave like a Quicken Loans application, this package is the starting point. When the Spark-Core Sass and JS setup files are imported into an application you will receive code for all of Spark-Core.

  • Spark-Extras are components that may not be needed by all applications, but are consistent with the style of Spark-Core. Spark-Extras Sass and JS are imported into an application on an individual basis. You import the components that you need.

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 Core

  • Install the npm package.

    npm install --save-dev @sparkdesignsystem/spark-core

  • Import the Sass setup file in your Sass build.

    @import "node_modules/@sparkdesignsystem/spark-core/spark-core";

    This will bring all Spark-Core 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 sparkCore from "node_modules/@sparkdesignsystem/spark-core/spark-core";

    This will bring all Spark-Core JS into your build.

Spark Extras

  • Install the npm package.

    npm install --save-dev @sparkdesignsystem/spark-extras

  • Import any of the Spark-Extras Sass patterns that you need.

    @import "node_modules/@sparkdesignsystem/spark-extras/components/<pattern-name>/<pattern-name>";

  • Import any of the Spark-Extras JS patterns that you need.

    import <pattern-name> from "node_modules/@sparkdesignsystem/spark-extras/components/<pattern-name>/<pattern-name>";

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/.

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


  • Two spaces for indentation.
  • For better code readability the attributes of elements should each be on their own line when the number of attributes makes that element exceed a line length of 80 characters.


  • Two spaces for indentation.
  • CSS is written in Sass and preprocessed into CSS.
  • Class Naming Conventions can be found here.
  • Stylelint is used to lint Sass files and all of Spark Sass coding conventions can be found in the Stylelint configuration file .


  • Two spaces for indentation.
  • Spark JS will use new features from ESNext and assumes applications using Spark have a JavaScript compiler setup.
  • Spark uses ESLint for JS linting.
  • ESLint is setup to use the Airbnb JavaScript Style Guide and Spark JS coding conventions come from there.
  • We follow JS recommendations from the Quicken Loans JS Concord Group.
  • Data attributes on DOM elements is the chosen method for DOM selection.

Change Workflow

Coming Soon


Drizzle Drizzle Documentation