@councildataproject/cdp-design NPM

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.

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: The primary website for the entire organization
cdp-frontend: A library that is used by all CDP instance websites

Developer Usage

CDP Images

Images are injected as a CSS content attribute.

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:

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:

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

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:

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