# @servicensw/base

Base CSS for all of Service NSW.

[Service NSW package documentation and examples](https://snsw-styleguide-preprod.cd.pnx.com.au/latest/section-base.html)<br>
(Login credentials required)

### Installation

```
npm install @servicensw/base --save-dev
```

### How to use

**CSS**

Importantly, the dist CSS from this package includes all of the CSS variables for all other components.

- PostCSS workflow: `@import '@servicensw/base';`
- Sass/Eyeglass: `@import 'servicensw-base';`
- Native CSS: `@import url('dist/base.css');`
- Link tag: `<link href="dist/base.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

The recommended usage is of ES modules, to take advantage of code-splitting.

```js
import Base from "@servicensw/base"

new Base({
  idAttributeSelectors:
    ":not(.notice) > h2:not(.accordion__title), h3:not(.accordion__title)",
  responsiveTableSelectors:
    ".table--responsive:not(.is-excluded), .page-section table:not(.is-excluded):not(.table--responsive)",
  videoTranscriptSelectors: ".transcript:not(.is-excluded)",
  makeGlobal: true,
})
```

The utilities can also be used independently;

```js
import { Keyboard } from "@servicensw/base"
```

Legacy usage;

- IIFE: `<script src="dist/base.js" type="text/javascript"></script>`
- Common JS: `const Base = require("@servicensw/base")` (initialize yourself)

This package includes a variety of JS functionality. This functionality can be access by including `dist/base.js`
via a script tag, or it can be imported using ES module syntax. See `src/base.js` for examples.

[Change log](./CHANGELOG.md)