# @councildataproject/cdp-design

> General styling and content for Council Data Project websites.

Latest version **1.0.5** (published 2022-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @councildataproject/cdp-design
pnpm add @councildataproject/cdp-design
yarn add @councildataproject/cdp-design
bun add @councildataproject/cdp-design
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-04-07 |
| First published | 2021-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 16.x |
| Dependencies | 0 |
| Unpacked size | 308.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Council Data Project |
| Maintainers | jacksonmaxfield |

## Links

- npm: https://www.npmjs.com/package/@councildataproject/cdp-design
- Repository: https://github.com/CouncilDataProject/cdp-design
- Issues: https://github.com/CouncilDataProject/cdp-design/issues
- npm.io page: https://npm.io/package/@councildataproject/cdp-design

## Recent versions

- 1.0.5 (latest) — 2022-04-07
- 1.0.4 — 2022-02-09
- 1.0.2 — 2021-02-11
- 1.0.1 — 2021-01-25

## README

# cdp-design

Styling and graphic design for Council Data Project websites and instances.

---

## Council Data Project

Council Data Project is an open-source project dedicated to providing journalists, activists, researchers, and all members of each community we serve with the tools they need to stay informed and hold their Council Members accountable.

For more information about Council Data Project, please visit [our website](https://councildataproject.org/).

## About

`cdp-design` is used to maintain all the styling and graphic design assets required for the various websites in the CDP ecosystem.

This means that any design changes made here propagate to:

- [councildataproject.org](https://councildataproject.org/): The primary website for the entire organization
- [cdp-frontend](https://github.com/CouncilDataProject/cdp-frontend): A library that is used by all CDP instance websites

## Developer Usage

### CDP Images

Images are injected as a [CSS content attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/content).

Logo image classes follow the specification: `cdp-logo-{primaryColor}-bg-{backgroundColor}`

Icon image classes follow the specification: `cdp-icon-{primaryColor}-bg-{backgroundColor}-size-{int}`

Example:

```javascript
import "@councildataproject/cdp-design/dist/images.css";

// assume you have a component
// sets the content of this div to the CDP logo
<div className="cdp-logo-black-bg-transparent">...</div>;
// OR an icon
<div className="cdp-icon-black-bg-transparent-size-64">...</div>;
```

### CDP Colors

Colors are simple color or background-color CSS attributes.

Content colors follow the specification: `cdp-{color}`

Background colors folow the specification: `cdp-bg-{color}`

Example:

```javascript
import "@councildataproject/cdp-design/dist/colors.css";

// assume you have a component
// sets the background color of this div to dark purple
// sets the text color to white
<div className="cdp-bg-dark-purple cdp-white">Hello World!</div>;
```

### Favicon

The most update-to-date favicon will always be found at:
[`src/static/images/favicon.ico`](https://raw.githubusercontent.com/CouncilDataProject/cdp-design/main/src/static/images/favicon.ico)

## Contributing

Much of this library and design system are auto-generated from a few key assets:

- `src/static/css/cdp-text.css`: All typography styling.
- `src/static/images/icon/black-bg-transparent.png`: The CDP icon, used for favicons, headers, etc. with all content of the icon in black and a transparent background.
- `src/static/images/icon/white-bg-transparent.png`: The CDP icon, used for favicons, headers, etc. with all content of the icon in white and a transparent background.
- `src/static/images/logo/black-bg-transparent.png`: The full CDP logo, used for branding with all content of the logo in black and a transparent background.
- `src/static/images/logo/white-bg-transparent.png`: The full CDP logo, used for branding with all content of the logo in white and a transparent background.
- `generate-cdp-colors.js`: The script to generate the `cdp-colors.css` file.

For example, if you wanted to propose a change to our logo you would:

1. Fork the `cdp-design` repository.
2. Clone your "forked" `cdp-design` repository to your local machine.
3. Replace the `black-bg-transparent.png` and the `white-bg-transparent.png` files located in the `src/static/images/logo/` directory.
4. Run `npm run generate` from the command line to generate all the new image variants.
5. Verify that all assets have been created properly in a file browser by viewing the `src/static/images/logo` directory.
6. Add, commit, and push the new logo files to your fork.
7. Create a pull request from your fork to this repository.

### Design Guidelines

#### General

Council Data Project designs should attempt to fit nicely within the [Mozilla Protocol](https://protocol.mozilla.org/) design system.

#### Logo

Logo proposals can be:

- Any size or dimension

Logo proposals must be:

- Created with black and white color variants
- Stored in PNG format

#### Icon

Icon proposals must:

- Be created with black and white color variants
- Be at least 256x256 in size
- Have square dimensions (256x256, 512x512, etc.)
- Stored in PNG format

If you are updating the icon, please also ensure that you update the `favicon.ico` in the `src/static/images/` directory.

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