First-time setup instructions:

• Click this link and make a new repo. This will start a repo using GitHub's repository templates, which copies all the files from this one to the new repo.
• Add your company's name. You'll need to change it from YOURNAMEHERE in:
  • package.json
  • src/data/global.yaml
  • README.md (That's this file!)
• Consider changing the license The Design System Starter is licensed with a CC Attribution-ShareAlike license. You should consider changing the license file if this doesn't fit the project you're starting with it.
• Start styling. You can:
  • Build a color palette in src/scss/settings/_variables.scss
  • Adjust typography and default <a> styles in src/scss/tools/_mixins.scss
    • Add @font-face blocks in src/scss/settings/_fonts.scss
    • Add <link>s to stylesheets in src/markup/patterns/drizzle/partials/stylesheet-link-tags.hbs
  • Good starting places (must be running the app to view these pages):
    • Common Elements page
    • The "btn" component
• Delete this documentation. This documentation is for first-time setup. Go into README.md and delete this list of steps.

YOURNAMEHERE Design System

Setup

1. Before running the project setup node/npm (Installation instructions).

2. Run npm install.

3. Run npm start. This will:

• Clear any previously built project files
• Build project files
• Start the server (localhost:3000)
• Run watch tasks

Drizzle

The pattern library is powered by Drizzle and will be organized by:

• Data
• Pages
• Patterns
• Templates

Public

The contents of the public/ directory will be copied directly into the root of the dist/ directory.

Sass

All CSS is compiled from Sass and can be found in the scss/ directory. Any files not prefixed with an underscore will compile to dist/css/.

JavaScript

All JavaScript is compiled with Webpack and can be found in the js/ directory. All JavaScript files should be imported into index.js which will then be compiled to dist/js/scripts.js.

Testing

Running npm test will run the following tasks:

• pa11y: Runs accessibility tests on all HTML files in the dist/ directory
• stylelint: Checks all CSS in the dist/ for errors and enforces Sparkbox's code conventions
• eslint: Checks all JavaScript in the dist/ for errors and enforces Sparkbox's code conventions