Getting Started - Developers

Requirements

Spark's Angular implementation assumes a few things about your project.

• We assume that your project is processing Sass rather than plain CSS for style information. More information for converting an Angular project to SCSS is available at angular.io.

• We assume that your Angular project is using at least Angular 6 with Typescript or is an Angular-CLI based project.

Getting Started

In order to get started with spark-core-angular , you'll need to follow these steps:

• Install the npm package.

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

• Import the Sass setup file in your Angular application's global styles Sass file. This can be done in the scss file specified at the highest level of your app. This will bring all Spark-Core patterns into your build. The .scss file extension is needed in the case of Angular so as to not conflict with JS files.

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

• You'll need to import the spark-core-angular NgModule in your main app.module.ts file and add it to the NgModule imports array.

  import { SparkCoreAngularModule } from "@sparkdesignsystem/spark-core-angular";

• If you plan to use Icons, you'll need to render the icon set at the outermost level of your application, underneath the opening HTML body tag. This is typically done in a global layout file.

  <sprk-icon-set></sprk-icon-set>

• You will also need to perform a typekit setup for your application.

The Spark Angular Extras components rely on the Spark Core Angular npm package and the SparkCoreAngularModule importation documented above. Make sure that is done in order to use the extras components. If your baseURL if not set in your Typescript config file then you will need the additional './' prepended to the path for the module imports.

• Install the npm package for the Spark Extra that you need.

  npm install --save-dev @sparkdesignsystem/spark-extras-angular-[package-name]

• You'll need to import the NgModule provided.

  import { Spark[PatternName]Module } from '@sparkdesignsystem/spark-extras-angular-[pattern-name]';

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

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

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