1 | # Capital Framework [![Travis](https://img.shields.io/travis/cfpb/capital-framework.svg?style=flat-square)](https://travis-ci.org/cfpb/capital-framework) [![npm](https://img.shields.io/npm/v/capital-framework.svg?style=flat-square)](https://www.npmjs.com/package/capital-framework)
|
2 |
|
3 | The Consumer Financial Protection Bureau's user interface framework.
|
4 |
|
5 | | buttons | core | expandables | forms | grid | icons
|
6 | |:---:|:---:|:---:|:---:|:---:|:---:|
|
7 | | [![npm](https://img.shields.io/npm/v/cf-buttons.svg?style=flat-square)](https://www.npmjs.com/package/cf-buttons) | [![npm](https://img.shields.io/npm/v/cf-core.svg?style=flat-square)](https://www.npmjs.com/package/cf-core) | [![npm](https://img.shields.io/npm/v/cf-expandables.svg?style=flat-square)](https://www.npmjs.com/package/cf-expandables) | [![npm](https://img.shields.io/npm/v/cf-forms.svg?style=flat-square)](https://www.npmjs.com/package/cf-forms) | [![npm](https://img.shields.io/npm/v/cf-grid.svg?style=flat-square)](https://www.npmjs.com/package/cf-grid) | [![npm](https://img.shields.io/npm/v/cf-icons.svg?style=flat-square)](https://www.npmjs.com/package/cf-icons) |
|
8 |
|
9 | | layout | notifications | pagination | tables | typography |
|
10 | |:---:|:---:|:---:|:---:|:---:|
|
11 | | [![npm](https://img.shields.io/npm/v/cf-layout.svg?style=flat-square)](https://www.npmjs.com/package/cf-layout) | [![npm](https://img.shields.io/npm/v/cf-notifications.svg?style=flat-square)](https://www.npmjs.com/package/cf-notifications) | [![npm](https://img.shields.io/npm/v/cf-pagination.svg?style=flat-square)](https://www.npmjs.com/package/cf-pagination) | [![npm](https://img.shields.io/npm/v/cf-tables.svg?style=flat-square)](https://www.npmjs.com/package/cf-tables) | [![npm](https://img.shields.io/npm/v/cf-typography.svg?style=flat-square)](https://www.npmjs.com/package/cf-typography) |
|
12 |
|
13 | ## Installation
|
14 |
|
15 | ```sh
|
16 | npm install capital-framework
|
17 | ```
|
18 |
|
19 | Components can also be installed individually:
|
20 |
|
21 | ```sh
|
22 | npm install cf-buttons
|
23 | npm install cf-expandables
|
24 | ```
|
25 |
|
26 | ### Project scaffolding
|
27 |
|
28 | Want some boilerplate?
|
29 | There is a Yeoman generator through the
|
30 | [generator-cf](https://github.com/cfpb/generator-cf) project:
|
31 |
|
32 | ```sh
|
33 | npm install -g yo generator-cf
|
34 | mkdir my-new-project && cd $_
|
35 | yo cf
|
36 | ```
|
37 |
|
38 | ### Using Less files directly
|
39 |
|
40 | If you don't want to use the
|
41 | [generator-cf](https://github.com/cfpb/generator-cf) Yeoman generator,
|
42 | you can download the Capital Framework source files and
|
43 | import them into your project.
|
44 |
|
45 | Run `npm install capital-framework`.
|
46 | This will download Capital Framework to your project's `node_modules` folder.
|
47 | You can then import the framework into your application's primary Less file:
|
48 |
|
49 | ```less
|
50 | @import (less) "node_modules/capital-framework/src/capital-framework.less";
|
51 |
|
52 | // the rest of your stylesheet...
|
53 | ```
|
54 |
|
55 | You may want to install individual [Capital Framework Components](https://cfpb.github.io/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.
|
56 |
|
57 | > NOTE: Be sure to run the Less files through
|
58 | [Autoprefixer](https://github.com/postcss/autoprefixer),
|
59 | or your compiled Capital Framework CSS will not work
|
60 | perfectly in older browsers.
|
61 |
|
62 | ## Contributing
|
63 |
|
64 | Please view our [contribution guidelines.](CONTRIBUTING.md)
|
65 |
|
66 |
|
67 | ## Open source licensing info
|
68 | 1. [TERMS](TERMS.md)
|
69 | 2. [LICENSE](LICENSE)
|
70 | 3. [CFPB Source Code Policy](https://github.com/cfpb/source-code-policy/)
|