The Consumer Financial Protection Bureau's user interface framework
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
config
scripts
src
test
.babelrc
.eslintrc
.gitignore
.stylelintrc
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENSE
README.md
TERMS.md
bower.json
gulpfile.js
jest.config.js
package-lock.json Preparing release Aug 20, 2018
package.json

README.md

Capital Framework Travis npm

The Consumer Financial Protection Bureau's user interface framework.

atomic-component buttons core expandables forms grid
npm npm npm npm npm npm
icons layout notifications pagination tables typography
npm npm npm npm npm npm

Installation

npm install capital-framework

Components can also be installed individually:

npm install cf-buttons
npm install cf-expandables

Project scaffolding

Want some boilerplate? There is a Yeoman generator through the generator-cf project:

npm install -g yo generator-cf
mkdir my-new-project && cd $_
yo cf

Using Less files directly

If you don't want to use the generator-cf Yeoman generator, you can download the Capital Framework source files and import them into your project.

Run npm install capital-framework. This will download Capital Framework to your project's node_modules folder. You can then import the framework into your application's primary Less file:

@import (less) "node_modules/capital-framework/src/capital-framework.less";

// the rest of your stylesheet...

You may want to install individual Capital Framework Components, so that you can leave out things you don't need, or to make it possible to update the components one-at-a-time in the future.

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

Contributing

Please view our contribution guidelines.

Open source licensing info

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