{"id":14482,"library":"capital-framework","title":"Capital Framework UI Library","description":"Capital Framework is a deprecated and abandoned front-end UI library developed by the Consumer Financial Protection Bureau (CFPB). It provides a collection of reusable HTML, CSS (Less), and JavaScript components designed to help build consistent user interfaces. The project's GitHub repository was archived and marked as read-only on July 10, 2020, with an explicit recommendation to migrate to the CFPB's successor design system. While the package version 11.0.1 is listed, active development ceased prior to or around the archiving date, meaning there is no ongoing maintenance, bug fixes, or new feature releases. The framework relies heavily on Less for its styling, requiring `autoprefixer` to ensure cross-browser compatibility. Its key differentiator was being the official UI framework for CFPB projects, providing a standardized, accessible base for government-related web development.","status":"abandoned","version":"11.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/cfpb/capital-framework","tags":["javascript"],"install":[{"cmd":"npm install capital-framework","lang":"bash","label":"npm"},{"cmd":"yarn add capital-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add capital-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to compile Capital Framework's .less source files into CSS.","package":"less","optional":false},{"reason":"Crucial for adding vendor prefixes to compiled CSS for browser compatibility, explicitly noted in the README.","package":"autoprefixer","optional":false},{"reason":"A Less plugin to integrate Autoprefixer directly into the Less compilation process.","package":"less-plugin-autoprefixer","optional":false},{"reason":"Often used as a command-line tool to run Autoprefixer on compiled CSS, especially if not using a Less plugin for Autoprefixer.","package":"postcss-cli","optional":true}],"imports":[{"note":"Capital Framework is a CSS/Less library. Core components are included via Less @import statements from the `less/` directory. Direct JavaScript imports for UI components are not how this library is consumed.","wrong":"import { CfCore } from 'capital-framework';","symbol":"cf-core","correct":"@import \"capital-framework/less/cf-core\";"},{"note":"For specific components like buttons, import their respective Less files. Avoid directly linking to pre-compiled CSS from internal paths as they may lack necessary Autoprefixer processing or global context.","wrong":"require('capital-framework/cf-buttons.css');","symbol":"cf-buttons","correct":"@import \"capital-framework/less/cf-buttons\";"},{"note":"To include all Capital Framework styles, import the main Less file. This should then be compiled to CSS and passed through Autoprefixer. The package does not offer a direct JavaScript entry point for styles.","wrong":"import 'capital-framework';","symbol":"All components","correct":"@import \"capital-framework/less/capital-framework.less\";"}],"quickstart":{"code":"{\n \"name\": \"my-capital-framework-project\",\n \"version\": \"1.0.0\",\n \"description\": \"Demonstrates basic usage of Capital Framework.\",\n \"scripts\": {\n \"build:less\": \"lessc --autoprefix=\\\"> 0.5%, not dead\\\" src/index.less dist/index.css\"\n },\n \"dependencies\": {\n \"capital-framework\": \"^11.0.1\",\n \"less\": \"^4.0.0\",\n \"less-plugin-autoprefixer\": \"^2.0.0\"\n }\n}\n\n// src/index.less\n@import \"../node_modules/capital-framework/less/capital-framework.less\";\n\nbody {\n padding: 1rem;\n}\n\n.wrapper {\n max-width: 960px;\n margin: 0 auto;\n .cf-btn {\n margin-right: 10px;\n }\n}\n\n// public/index.html\n\n\n\n \n \n Capital Framework Demo\n \n\n\n
\n
Welcome to Capital Framework
\n \n \n
This is a paragraph styled by Capital Framework.
\n
\n\n\n","lang":"javascript","description":"This quickstart demonstrates how to set up a basic project, compile Capital Framework's Less files to CSS with Autoprefixer, and include the resulting styles in an HTML page. It defines a `package.json` script using `lessc` and showcases importing the main framework Less file, then applying some core styles and components in HTML."},"warnings":[{"fix":"Migrate to a actively maintained UI framework or the CFPB's current design system. If continued use is unavoidable, fork the repository and manage maintenance internally.","message":"The entire `capital-framework` project was officially deprecated and archived on July 10, 2020. The repository is read-only, and no further development, bug fixes, or security patches will be provided. Users are strongly advised to migrate to the CFPB's newer design system.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Update build scripts to use Less compilers that process `@import` directives. Remove any reliance on Grunt for concatenating Capital Framework Less files.","message":"Version 1.0.0 changed the build process to use Less `@import` statements for component inclusion instead of Grunt concatenation. This significantly alters how projects should consume and build Capital Framework styles.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Review project build configurations and Less import paths. Test thoroughly for any broken references or unexpected styling issues resulting from changes in the internal package structure or build process.","message":"Version 8.0.0 involved a transition to Lerna for monorepo management. While described as an internal change, this often implies changes in package structure, file paths, or build configurations that could break consumer projects relying on specific internal module layouts or build processes. It affected several sub-packages like `cf-buttons`, `cf-core`, etc.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Always integrate `autoprefixer` into your CSS build pipeline. Ensure it runs after Less compilation but before the CSS is used in production. Example: `lessc --autoprefix=\\\"> 0.5%, not dead\\\" input.less output.css`.","message":"The compiled Capital Framework CSS will not work perfectly in older browsers without being run through Autoprefixer. The README explicitly warns about this necessity.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your `autoprefixer` and `postcss` (if used) dependencies are up-to-date. Configure `browserslist` correctly in your `package.json` or `.browserslistrc` file to specify your target browsers.","cause":"Using a very old version of Autoprefixer or trying to prefix properties that are no longer standard or automatically handled by modern Autoprefixer versions.","error":"Property -webkit-box-sizing is not supported by autoprefixer. Using legacy prefix instead. Autoprefixer will remove this in a future release."},{"fix":"Verify that all necessary Capital Framework Less files, especially `cf-core.less` or `capital-framework.less` which define global variables, are correctly imported at the beginning of your main Less file.","cause":"A Less variable (e.g., `@grid_gutter-width`) from Capital Framework is missing or not correctly imported/defined, often due to an incomplete or incorrect `@import` path.","error":"NameError: variable @grid_gutter-width is undefined in ..."},{"fix":"Clear your npm cache (`npm cache clean --force`), ensure you're using a compatible Node.js version, and try installing again. Check npm output for more specific error details related to compilation or peer dependencies.","cause":"Issues during installation of `less` or `less-plugin-autoprefixer`, potentially due to Node.js version incompatibility, network issues, or corrupted npm cache.","error":"Error: `npm install less less-plugin-autoprefixer` failed with exit code 1"}],"ecosystem":"npm"}