# Duet Eleventy Template

This is a [Eleventy](https://www.11ty.dev/) project template for [Duet Design System](https://www.duetds.com). This starter template comes with support for [Duet Web Components](https://www.duetds.com/components/). To learn more about Eleventy and what’s possible, see [Eleventy documentation](https://www.11ty.dev/docs/).

## Features

- Comes with [Duet Web Components](https://www.duetds.com/components/).
- Supports [Duet Design Tokens](https://www.duetds.com/tokens/) in SCSS without additional configuration.
- Comes with automated build and deploy steps for prototyping.
- Additionally comes with [Duet Fonts](https://www.duetds.com/typography/) and [Duet CSS Framework](https://www.duetds.com/css-framework/) preconfigured.

## Development

Before moving further, please make sure you have [Node.js](https://nodejs.org/en/) 12.x or later installed on your machine. You can install the latest version through their website. Once you have Node.js installed, follow the below steps to get started.

1. Run `npm install` in the root directory of this project to install the dependencies.
2. Then run `npm start` to start up the server and development environment. This automatically opens up a new browser window showing `http://localhost:8000`.
3. If you wish to test the production build, you can start up the server in production mode by running `npm run start:prod`. Please note that this makes Eleventy do JS+CSS minification with every change so it might slow down the development experience.
4. This template ships with Prettier configuration. To enable HTML formatting for `.njk` templates, add the following to your VSCode settings.json:

```json
{
  "files.associations": {
    "*.njk": "html"
  }
}
```

## Integration Tests

Run `npm run test` to run integration tests.

## Building

Run `npm run build` to build a static website under `dist` that can be deployed using GitHub Pages, Azure Cloud, or Amazon S3.

## Project Structure

```
├─ src/
│  ├─ assets/
│  ├─ css/
│  │  ├─ main.scss
│  │  └─ partials/
│  │     └─ example.scss
│  ├─ data/
│  ├─ includes/
│  │  ├─ layout.njk
│  │  ├─ header.njk
│  │  └─ footer.njk
│  ├─ js/
│  ├─ index.njk
│  └─ ...
├─ .eleventy.js
└─ gulpfile.js
```

## Usage

For more usage instructions, please see [Duet Design System documentation](https://www.duetds.com).

## Copyright

Copyright © 2020 LocalTapiola Services Ltd. For license, please see LICENSE.md.