A Modern Eden (AME) 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 be 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

Webhint

webhint is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.

Deploying

A Modern Eden is hosted on Heroku.

See Heroku documentation for deploying code.