{"id":17786047,"url":"https://github.com/sparkdesignsystem/spark-design-system","last_synced_at":"2025-04-05T13:02:57.662Z","repository":{"id":25696967,"uuid":"104943277","full_name":"sparkdesignsystem/spark-design-system","owner":"sparkdesignsystem","description":"Spark Design System","archived":false,"fork":false,"pushed_at":"2023-01-11T20:47:46.000Z","size":69450,"stargazers_count":109,"open_issues_count":30,"forks_count":73,"subscribers_count":10,"default_branch":"staging","last_synced_at":"2025-03-29T12:05:03.249Z","etag":null,"topics":["design-patterns","design-system","hacktoberfest","spark"],"latest_commit_sha":null,"homepage":"https://sparkdesignsystem.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sparkdesignsystem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2017-09-26T22:16:37.000Z","updated_at":"2025-03-06T17:37:31.000Z","dependencies_parsed_at":"2023-01-14T07:00:50.716Z","dependency_job_id":null,"html_url":"https://github.com/sparkdesignsystem/spark-design-system","commit_stats":null,"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkdesignsystem%2Fspark-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkdesignsystem%2Fspark-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkdesignsystem%2Fspark-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkdesignsystem%2Fspark-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sparkdesignsystem","download_url":"https://codeload.github.com/sparkdesignsystem/spark-design-system/tar.gz/refs/heads/staging","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339149,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-patterns","design-system","hacktoberfest","spark"],"created_at":"2024-10-27T09:04:13.808Z","updated_at":"2025-04-05T13:02:57.633Z","avatar_url":"https://github.com/sparkdesignsystem.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/sparkdesignsystem/spark-design-system.svg?branch=staging)](https://travis-ci.org/sparkdesignsystem/spark-design-system)\n\n# Spark Design System\n\nWelcome to the Spark Design System, a product of Rocket Mortgage.\n\nSpark Design System is where we collect our best solutions for how to design and build unified digital experiences for the Rocket brands.\n\n* [Spark](https://www.npmjs.com/package/@sparkdesignsystem/spark) contains the basic patterns and components that make up\n  the visual and interaction design of the Rocket Mortgage family of\n  Fintech products. If your application is expected to look and behave\n  like a Rocket Mortgage application, this package is the starting point.\n  When the Spark Sass and JS setup files are imported into an application you will receive code for all of Spark.\n\n## Getting Started\n\n**Spark assumes your project is using [Sass](https://sass-lang.com/) for styling and\nalso that your project has a JavaScript build step that will transpile ES6+ and polyfill appropriately for browser support.**\n\n### Spark\n\n* Install the npm package.\n\n  `npm install --save-dev @sparkdesignsystem/spark`\n\n* Import the Sass setup file in your Sass build.\n\n  `@import \"node_modules/@sparkdesignsystem/spark-styles/spark.scss\";`\n\n  This will bring all Spark Sass patterns into your build. The Spark classes\n  are namespaced so they don't affect any existing CSS.\n\n* Import the JS setup file in your JS build.\n\n  `import spark from \"node_modules/@sparkdesignsystem/spark/spark\";`\n\n  This will bring all Spark JS into your build.\n\n## Contribution Guide\n\n### Code Organization\n\nSpark is managed as a monorepo. All of the Spark source code lives in a\nsingle repo, but is released as separate packages.\n\nThis repo consists of the design system packages, wrapped in an instance\nof [Gatsby](https://www.gatsbyjs.org). Spark uses Gatsby for our main documentation site and\n[Storybook](https://storybook.js.org) for our component previews and developer documentation.\n\nIn the root there are three directories, `react`, `angular` and `html`. These house the files\nthat are published to npm.\n\n### Dev Environment\n\nIf you want to run a copy of Gatsby locally:\n\n1. Navigate to the root directory of the project.\n2. Run `npm install`.\n3. Run `npm start`.\n4. Open your browser to `http://localhost:8000/`.\n\nIf you want to run a copy of Gatsby and Storybook locally:\n\n1. Navigate to the root directory of the project.\n2. Run `npm run installall`.\n3. Run `npm start` to start Gatsby then open your browser to `http://localhost:8000/`.\n4. Run `(cd react/ ; npm run storybook)` to start Storybook for React.\n5. Run `(cd angular/ ; npm run storybook)` to start Storybook for Angular.\n6. Run `(cd html/ ; npm run storybook)` to start Storybook for HTML.\n\n### Unit Tests\n\nSpark uses the [Jest](https://jestjs.io) test\nframework for unit tests. To run unit tests in Spark:\n\n1. Navigate to the framework directory of your choice from the root `cd react`, `cd angular`, or `cd html`.\n2. Run `npm install` if you have not already.\n3. Run `npm test`.\n4. See test output in terminal to determine number of passing or failed tests.\n\n### Code Style Standards\n\nSpark follows specific coding styles for HTML, CSS and\nJavaScript to ensure maintainability and scalability.\n\n#### HTML\n\n* Two spaces for indentation.\n* For better code readability the attributes of elements should each be on their own line\n  when the number of attributes makes that element exceed a line length of 80 characters.\n\n#### CSS\n\n* Two spaces for indentation.\n* CSS is written in [Sass](https://sass-lang.com/) and preprocessed into CSS.\n* Class Naming Conventions can be found [here](https://sparkdesignsystem.com/docs/class-naming-convention).\n* [Stylelint](https://github.com/stylelint/stylelint) is used to lint\n  Sass files and all of Spark Sass coding conventions can be found\n  in the [Stylelint configuration file ](https://github.com/sparkdesignsystem/spark-design-system/blob/main/.stylelintrc).\n\n#### JS\n\n* Two spaces for indentation.\n* Spark JS will use new features from ESNext and assumes applications using Spark\n  have a JavaScript compiler setup.\n* Spark uses [ESLint](https://eslint.org/) for JS linting.\n* ESLint is setup to use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)\n  and Spark JS coding conventions come from there.\n* Data attributes on DOM elements is the chosen method for DOM selection.\n\n#### React and Angular\n* For `additionalClasses` properties use the naming convention `elementAdditionalClasses` for other elements that we offer additional classes support on besides the main element.\n\n### Change Workflow\n\n`Coming Soon`\n\n## Credit\n\n[Gatsby](https://www.gatsbyjs.org)\n[StorybookJS](https://storybook.js.org)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparkdesignsystem%2Fspark-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsparkdesignsystem%2Fspark-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparkdesignsystem%2Fspark-design-system/lists"}