@ou-imdt/css/docs/guide/css-in-webcomponents.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# Using IMD CSS in Webcomponents

## Importable File Register

CSS is being updated to better support usage in web components. The files listed below have been updated and are safe for importing.

You will need to import the 'base' file along with any others you wish to use. Base contains a minimal reset, global custom properties used across files and sets the basic styles for text etc on :root and :host.

Note: Details are needed on how to utilise font awesome but that will come after the update.


| .css File                 | Import example                                                              |
| ------------------------- |  -------------------------------------------------------------------------- |
| base                      | `import base from "@ou-imdt/css/src/base.css?raw";`                         |
| button                    | `import button from "@ou-imdt/css/src/native/button.css?raw";`              |
| h                         | `import h from "@ou-imdt/css/src/native/h.css?raw";`                        |
| p-small-u                 | `import p from "@ou-imdt/css/src/native/p-small-u.css?raw";`                |
| input-textarea-select     | `import input from "@ou-imdt/css/src/native/input-textarea-select.css?raw";`|
| input-checkbox-radio      | `import radio from "@ou-imdt/css/src/native/input-checkbox-radio.css?raw";` |
| label                     | `import label from "@ou-imdt/css/src/native/label.css?raw";`                |
| a.css                     | `import a from "@ou-imdt/css/src/native/a.css?raw";`                        |
| fieldset-legend           | `import fieldset from "@ou-imdt/css/src/native/fieldset-legend.css?raw";`   |
| lists                     | `import lists from "@ou-imdt/css/src/native/lists.css?raw";`                |
| mark-s-del-ins-i          | `import mark from "@ou-imdt/css/src/native/mark-s-del-ins-i.css?raw";`      |
| pre                       | `import pre from "@ou-imdt/css/src/native/pre.css?raw";`                    |
| code                      | `import code from "@ou-imdt/css/src/native/code.css?raw";`                  |
| abbr                      | `import abbr from "@ou-imdt/css/src/native/abbr.css?raw";`                  |
| figure-caption            | `import fig from "@ou-imdt/css/src/native/figure-caption.css?raw";`         |
| table                     | `import fig from "@ou-imdt/css/src/native/table.css?raw";`                  |
| details-dialog            | `import details from "@ou-imdt/css/src/native/details-dialog.css?raw";`     |
| hr-kbd-samp-time-var-wbr  | `import hr from "@ou-imdt/css/src/native/hr-kbd-samp-time-var-wbr.css?raw";`|
| dfn                       | `import hr from "@ou-imdt/css/src/native/dfn.css?raw";`                     |

| File                       | Import                                                                      |
| -------------------------- |  -------------------------------------------------------------------------- |
| imd-palette                | `import palette from "@ou-imdt/css/src/utility/imd-palette.css?raw";`       |
| basic-layout               | `import layout from "@ou-imdt/css/src/layout/basic-layout.css?raw";`        |
| striped                    | `import layout from "@ou-imdt/css/src/utility/striped.css?raw";`            |
| icon                       | `import layout from "@ou-imdt/css/src/utility/icon.css?raw";`            |


## In Native with Vite

```js
// Base is always needed as it contains body styles and common properties
import base from `@ou-imdt/css/src/base.css?raw`
import palette from `@ou-imdt/css/src/utility/imd-palette.css?raw`

class Component extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open", delegatesFocus: false });
    const template = `
      <style>${[base, palette].join(" ")}</style>
      <!-- markup -->
    `;
    this.shadowRoot.append(template.content.cloneNode(true));
  }
  ...
}
```

## In Lit

```js
import {LitElement, css, unsafeCSS} from 'lit';

// Base is always needed as it contains body styles and common properties
import base from `@ou-imdt/css/src/base.css?raw`
import palette from `@ou-imdt/css/src/utility/imd-palette.css?raw`

class Component extends LitElement {
  static styles = [css`${unsafeCSS(base)}`, css`${unsafeCSS(palette)}`]
  constructor() {
    super();
    ...
  }
  ...
}

```