# i80 Design System

> The design system behind i80's products (zPlan, NordBytes). It is a stylesheet plus
> `<i80-*>` Web Components, so it needs no framework and no build step.

## Read this first

To use i80 in an application, load two files and write HTML:

```html
<link rel="stylesheet" href="https://design.i80.dk/v/0.5.2/components.css">
<script type="module" src="https://design.i80.dk/v/0.5.2/i80.js"></script>

<i80-button color="primary" icon="plus">New plan</i80-button>
```

That works in plain HTML and in any server-rendered app: Django, Flask/Jinja, Rails, PHP,
HTMX. React and Vue work too (custom elements are part of the browser), but we do not test
them and there are no wrapper packages.

The CSS alone is enough if you would rather write the classes yourself:
`<button class="i80-button i80-button--color-primary i80-button--size-medium">Save</button>`.

## Rules that matter

- Your page needs `*, *::before, *::after { box-sizing: border-box; }`. The component styles
  assume it and `components.css` does not apply it; without it padding is added on top of
  widths instead of fitting inside them.
- Native elements you write inside a tag are kept and only styled, so server-rendered forms
  keep their field names, ids, values and CSRF token:
  `<i80-text-input label="Email">{{ form.email }}</i80-text-input>`.
- There is no Shadow DOM, so `<label for>`, `aria-describedby`, form submission and your own
  CSS work exactly as in plain HTML.
- Pin a version (`/v/0.5.2/`) in production; it never changes. `/latest/` follows main.
- Themes are one stylesheet loaded after `components.css`: `theme-zplan.css`, `theme-dark.css`.
  Dark is turned on with `<html data-i80-theme="dark">`.
- Icons are Flight icons by name (`icon="plus"`); `i80.js` fetches them from `icons/` next to
  it, and `setIconBase()` points that somewhere else if you host the files yourself.
- Use an attribute the documentation lists. An element ignores what it does not know, so a
  guessed attribute fails silently.

## Reference

- [Getting started](https://design.i80.dk/getting-started/for-engineers) — loading the files,
  forms, icons, tokens.
- [Every tag with live examples on one page](https://design.i80.dk/elements/)
- [The same list as JSON, for tools](https://design.i80.dk/elements/components.json) — every
  tag with its attributes, values and defaults. Read this before writing markup.
- [A whole app screen built from the tags](https://design.i80.dk/elements/app.html)
- [Documentation per component](https://design.i80.dk/components) — the Code tab is HTML, the
  Guidelines tab is about when to use what.
- [Themes](https://design.i80.dk/getting-started/themes)
- [Using i80 in a framework](https://design.i80.dk/getting-started/web-components)
- [Source](https://gea.i80.dk/hjess/DesignSystem)

## Not what you want

The repository this site is built from is a fork of HashiCorp's Helios, an Ember codebase.
If you come across `.gts` or `.hbs` files, or a `<I80::Button />` tag, that is the site's own
source and not how i80 is used in an application.