# @coopdigital/foundations-vars

> Co-op CSS Foundations: Variables

Latest version **3.8.2** (published 2021-06-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @coopdigital/foundations-vars
pnpm add @coopdigital/foundations-vars
yarn add @coopdigital/foundations-vars
bun add @coopdigital/foundations-vars
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.8.2 |
| Published | 2021-06-28 |
| First published | 2018-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 54.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @coopdigital |
| Maintainers | coopjames, mark.sampson, matt-tyas, mchadwickweb, desmondporkpie, froddd, gurpreet, hanross, jcpeden, lisap88, dalefrontend, colinrotherham, danwlsn, su00ji |

## Links

- npm: https://www.npmjs.com/package/@coopdigital/foundations-vars
- Repository: https://github.com/coopdigital/coop-frontend
- Homepage: https://github.com/coopdigital/coop-frontend#readme
- Issues: https://github.com/coopdigital/coop-frontend/issues
- npm.io page: https://npm.io/package/@coopdigital/foundations-vars

## Recent versions

- 3.8.2 (latest) — 2021-06-28
- 3.8.1 — 2021-02-19
- 3.8.0 — 2021-02-18
- 3.7.2 — 2021-02-15
- 3.7.1 — 2020-11-20
- 3.7.0 — 2020-11-19
- 3.6.2 — 2020-11-12
- 3.6.1 — 2020-11-03
- 3.6.0 — 2020-10-30
- 3.5.0 — 2020-10-27
- 3.4.1 — 2020-10-26
- 3.4.0 — 2020-10-20
- 3.3.1 — 2020-10-08
- 3.3.0 — 2020-09-30
- 3.2.2 — 2020-09-17
- … 31 more at https://npm.io/package/@coopdigital/foundations-vars/versions

## README

# Co-op Foundations: Variables
Common global variables that all Co-op CSS Modules rely upon.

## Dependencies (for PostCSS sources only)
- `postcss`
- `precss`

## How to use
1. Install via `npm` or Yarn:
  ```bash
  $ npm install @coopdigital/foundations-vars --save
  $ yarn add @coopdigital/foundations-vars
  ```
2. Add CSS module to your application via a most appropriate method. This will entirely depend on your application and how you are currently loading CSS modules within it.

> **Warning**  
> If you want to use global Media Query breakpoint variables, you have to include `src/vars.pcss` in your build pipeline, as they will not be present in the postprocessed CSS file that you can find under `dist/vars.css`.

## Examples
Here's a bunch of examples, showing how you can integrate this CSS module in your project, based on most popular types of project. You can either use a post-processed and pre-built CSS form the `dist` directory, ot use PostCSS sources from the `src` dir.

The latter have two dependencies, which should be consumed by your frontend toolkit to postprocess the CSS correctly.

### Vue.js
In Vue, you can just reference it from a global component like so:
```css
<style>
/* Import PostCSS source */
@import "~@coopdigital/foundations-typography/src/vars.pcss";
/* Import postprocessed CSS distributable */
@import "~@coopdigital/foundations-typography/dist/vars.css";
</style>
```

### React.js
TBD

### Webpack
TBD


## License
Copyright (c) 2021 Co-operative Group Limited.
Licensed [MIT](https://github.com/coopdigital/coop-frontend/blob/master/LICENSE).

---
_Source: https://npm.io/package/@coopdigital/foundations-vars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._