adrianamusic / design-system

CFPB's work-in-progress design system

CFPB Design System

The Consumer Financial Protection Bureau's user interface framework and documentation.

atomic-component	buttons	core	expandables	forms	grid

icons	layout	notifications	pagination	tables	typography

Installation

Install components using yarn or npm:

yarn add @cfpb/cfpb-buttons
# or
npm install @cfpb/cfpb-buttons

Or you can install all components at once:

yarn add @cfpb/cfpb-design-system
# or
npm install @cfpb/cfpb-design-system

Usage

Import individual Less stylesheets or the entire design system into your project:

@import '@cfpb/cfpb-buttons/src/cfpb-buttons.less';
@import '@cfpb/cfpb-typography/src/cfpb-typography.less';
// or
@import '@cfpb/cfpb-design-system/src/cfpb-design-system.less';

// the rest of your stylesheet...

Components with JavaScript can also be imported:

import Expandable from '@cfpb/cfpb-expandables/src/Expandable'';

Expandable.init( document.querySelector( '#container' ) );

NOTE: Be sure to run the Less files through Autoprefixer, or your compiled CSS might not work perfectly in older browsers.

Documentation

The Design System's website is available at https://cfpb.github.io/design-system/. It lives in this repository's docs/ directory and is powered by Netlify CMS and Jekyll. To edit any page of the website, click the edit button at the bottom right of the page. You'll need to be added as a contributor to this repository in order to authenticate with Netlify CMS.

To run the documentation website locally:

git clone https://github.com/cfpb/design-system.git
cd design-system
yarn
yarn start

Visit http://localhost:4000/design-system/ to view the site. Editing a page locally will change your local files, using an experimental Netlify CMS feature.

To run accessibility tests against your local files:

yarn a11y

Contributing

Please view our contribution guidelines.

Open source licensing info

1. TERMS
2. LICENSE
3. CFPB Source Code Policy