# @dpc-sdp/ripple-global

> The core styles and utilities used by all ripple components. Includes sets of colours, fonts, breakpoints.

Latest version **1.38.3** (published 2023-10-10) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @dpc-sdp/ripple-global
pnpm add @dpc-sdp/ripple-global
yarn add @dpc-sdp/ripple-global
bun add @dpc-sdp/ripple-global
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.38.3 |
| Published | 2023-10-10 |
| First published | 2018-03-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 664.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 65 |
| Maintainers | waitingallday, alan-cole, sdp.devs, b-schiller, xgaitanis, deloitte-drupal-support |

## Links

- npm: https://www.npmjs.com/package/@dpc-sdp/ripple-global
- Repository: https://github.com/dpc-sdp/ripple/tree/master/packages/components/Atoms/Global
- Homepage: https://ripple.sdp.vic.gov.au
- npm.io page: https://npm.io/package/@dpc-sdp/ripple-global

## Dependencies (4)

- [moment](https://npm.io/package/moment.md) ^2.29.1
- [vue-focus](https://npm.io/package/vue-focus.md) ^2.1.0
- [masonry-layout](https://npm.io/package/masonry-layout.md) ^4.2.1
- [object-fit-images](https://npm.io/package/object-fit-images.md) ^3.2.3

## Recent versions

- 1.38.3 (latest) — 2023-10-10
- 1.36.1 (dev) — 2023-05-15
- 1.16.0-preview.0 (preview) — 2020-10-30
- 1.11.1-lighthouse.1 (lgs) — 2020-07-31
- 1.5.7-optimisation.0 (optimisation) — 2020-02-12
- 1.38.2 — 2023-08-22
- 1.38.1 — 2023-07-18
- 1.38.0 — 2023-05-29
- 1.37.1 — 2023-05-15
- 1.37.0 — 2023-05-02
- 1.36.0 — 2023-04-18
- 1.35.1 — 2023-03-28
- 1.32.3 — 2023-03-27
- 1.35.0 — 2023-03-23
- 1.34.0 — 2023-03-16
- … 231 more at https://npm.io/package/@dpc-sdp/ripple-global/versions

## README

<!-- GENERATED_TITLE -->
# @dpc-sdp/ripple-global

<!-- /GENERATED_TITLE -->
<!-- GENERATED_DESCRIPTION -->
> The core styles and utilities used by all ripple components. Includes sets of
colours, fonts, breakpoints.

<!-- /GENERATED_DESCRIPTION -->

--------------------------------------------------------------------------------

## rplOptions

This is a globally available options object to allow passing options between ripple components. Don't abuse this, keep it light as the object gets passed between all components.

```js
  nuxt: false, // enable if using in SSR environment eg: nuxt
  isDev: false, // set to true to enable dev mode, used to show Ripple component errors if have.
  hostname: 'localhost', // set hostname for rpl-link etc
  imgQueryString: (bp) => {
    // Override function that appends query string to images to use with image processing CDN's - see @spc-sdp/ripple-nuxt-ui for example
    return `?height=100&width=200` 
  },
  origin: '', // URL with protocol://host(:port) e.g. http://localhost:3000
  quickexit: false, // enable quick exit feature
  quickexiturl: 'https://www.google.com', // URL to use for quickexit
  plugins: [], // array of cheerio transformer function plugins to pass to RplMarkup
  viclogo: true // whether to display primary vic.gov.au logo
  externalLinksInNewWindow: false // (Bool) Whether links open in new window by default
  card: {
    trimFieldfonts: ['Your-font-name'] // If custom fonts are used in card trimmed field, set them here.
  }
```

For add your options, you need to use the Ripple global plugin in your Vue.js porject.

```JS
import RplGlobal from '@dpc-sdp/ripple-global'
Vue.use(RplGlobal, { // You options ... })
```

For how Vue plugin works, please check https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin.

--------------------------------------------------------------------------------

<!-- GENERATED_INSTALL -->
## Install

```shell
npm install @dpc-sdp/ripple-global --save
```

<!-- /GENERATED_INSTALL -->

--------------------------------------------------------------------------------

<!-- GENERATED_DEPENDENCY_GRAPH -->
## Dependency graph

```shell
@dpc-sdp/ripple-global
├── masonry-layout
├── moment
├── object-fit-images
└── vue-focus
```

<!-- /GENERATED_DEPENDENCY_GRAPH -->

--------------------------------------------------------------------------------

<!-- GENERATED_IMPORT -->
## Import

```js
import { RplDivider } from '@dpc-sdp/ripple-global'
import RplGlobal from '@dpc-sdp/ripple-global'
```

<!-- /GENERATED_IMPORT -->

--------------------------------------------------------------------------------

<!-- GENERATED_USAGE_AND_TESTS -->
## Usage and Tests

See [Storybook/Atoms/Global/Colors](https://ripple.sdp.vic.gov.au/?path=/story/atoms-global--colors).

See [Storybook/Atoms/Global/Fonts](https://ripple.sdp.vic.gov.au/?path=/story/atoms-global--fonts).

See [Storybook/Atoms/Global/Typography](https://ripple.sdp.vic.gov.au/?path=/story/atoms-global--typography).

See [Storybook/Atoms/Global/Breakpoints](https://ripple.sdp.vic.gov.au/?path=/story/atoms-global--breakpoints).

<!-- /GENERATED_USAGE_AND_TESTS -->

--------------------------------------------------------------------------------

## Known issues

* Typography: Display headings (with background) have reduced padding on IE11 / Edge.

--------------------------------------------------------------------------------

<!-- GENERATED_LICENSE -->
## License

Licensed under the Apache-2.0 License.

<!-- /GENERATED_LICENSE -->

---
_Source: https://npm.io/package/@dpc-sdp/ripple-global · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._