Getting Started - Developers

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 Core

  • Install the npm package.

    npm install --save-dev @sparkdesignsystem/spark-core
  • Import the Sass setup file in your Sass build. This will bring all Spark-Core Sass patterns into your build. The Spark classes are namespaced so that they don't affect any existing css.

    @import "node_modules/@sparkdesignsystem/spark-core/spark-core";
  • Import the JS setup file in your JS build. This will bring all the Spark-Core JS into your build.

    import sparkCore from "node_modules/@sparkdesignsystem/spark-core/spark-core";
  • If you plan to use Icons, you'll need to import the svg file that contains the symbols.

    "node_modules/@sparkdesignsystem/spark-core/spark-core-icons.svg"
  • You will also need to perform a typekit setup for your application.

  • The main content area of your site will also need to have a data attribute set:

    data-sprk-main

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>";

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.

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

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

CSS

JavaScript

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

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.

Running the Spark Docs site locally

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