$

Getting Started - HTML

Welcome

This getting started guide is intended for developers. See below for instructions on how to install Spark and bring it into your existing build.

Requirements

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

Getting Started

  • Install the npm package.

    npm install --save-dev @sparkdesignsystem/spark
  • Import the Sass setup file in your Sass build. This will bring all Spark Sass patterns into your build. This includes styles for base HTML elements, but the Spark classes are namespaced so that they don't affect any existing css classes.

    @import "node_modules/@sparkdesignsystem/spark/spark";
    • If you are configuring Spark default variables, create a separate Sass file to override the Spark variables and load it prior to the Spark import.

  • Add this data attribute set to the main content area of your site:

    data-sprk-main
  • Copy and paste this script into the head tag:

    <script> document.getElementsByTagName('html')[0].classList.add('sprk-u-JavaScript'); </script>
  • Spark has two JavaScript files that need to be incorporated into your build in order for Spark's behavior to work.

    • spark.js - This file contains the bulk of Spark's behavior and can be loaded after the page is rendered, this is best done before the closing body tag.

      • Import the post-render ES6 setup file in your JS build. This will bring all the Spark JS into your build. There is also an ES5 version if preferred. It's located in @sparkdesignsystem/spark/es5.

        import spark from "@sparkdesignsystem/spark/spark";
      • Init the Spark JS, passing in a config object (optional).

        spark({ //config, see below });

        See below for available configuration options:

        Key Description
        datePickerConfig Exposes configuration provided by tiny-date-picker, see github for documentation.
    • spark-polyfill.js - This file loads a few polyfills that Spark requires. If your application is already polyfilling the items below, you don't need to load this file.

      • Promise
      • Array.from
      • String.includes
      • Array.find
      • NodeList.forEach
      • classList on SVG Elements
      import "@sparkdesignsystem/spark/es5/sparkPolyfills";
  • Spark does not provide icons directly. What you see below are proprietary icons in use by Quicken Loans. To supply your own icon set, you need to import an svg that contains symbols for the ids referenced on the icon page. This symbol file should occur in the DOM before the first use element.

Browser Support

Spark supports the following browsers (current version and 1 prior):

  • Google Chrome
  • Google Chrome (Mobile)
  • Mozilla Firefox
  • Mozilla Firefox (Mobile)
  • Microsoft Edge
  • Apple Safari
  • Apple Safari (Mobile)

Spark also supports the following:

  • Microsoft Internet Explorer 11

Change Workflow and Contribution Guide

If you are interested in contributing to Spark, please read our full change workflow and contribution guide to get started.