Registry / web-framework / capital-framework

capital-framework

library11.0.1jsnpmunverified

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.

web-framework

npm install capital-framework

github ↗package ↗

INSTALL

IMPORT

SIG · CAPITAL-FRAMEWORK

capital-framework

web-frameworkjavascriptv11.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

cf-core

✓ @import "capital-framework/less/cf-core";

✗ import { CfCore } from 'capital-framework';

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.

cf-buttons

✓ @import "capital-framework/less/cf-buttons";

✗ require('capital-framework/cf-buttons.css');

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.

All components

✓ @import "capital-framework/less/capital-framework.less";

✗ import 'capital-framework';

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.

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.

{ "name": "my-capital-framework-project", "version": "1.0.0", "description": "Demonstrates basic usage of Capital Framework.", "scripts": { "build:less": "lessc --autoprefix=\"> 0.5%, not dead\" src/index.less dist/index.css" }, "dependencies": { "capital-framework": "^11.0.1", "less": "^4.0.0", "less-plugin-autoprefixer": "^2.0.0" } } // src/index.less @import "../node_modules/capital-framework/less/capital-framework.less"; body { padding: 1rem; } .wrapper { max-width: 960px; margin: 0 auto; .cf-btn { margin-right: 10px; } } // public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Capital Framework Demo</title> <link rel="stylesheet" href="./dist/index.css"> </head> <body> <div class="wrapper"> <h1>Welcome to Capital Framework</h1> <button class="cf-btn cf-btn__primary">Primary Button</button> <button class="cf-btn cf-btn__secondary">Secondary Button</button> <p class="cf-text">This is a paragraph styled by Capital Framework.</p> </div> </body> </html>

Debug

Known issues

breakingThe 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.

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.

affects: >=1.0.0

breakingVersion 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.

fix

Update build scripts to use Less compilers that process `@import` directives. Remove any reliance on Grunt for concatenating Capital Framework Less files.

affects: >=1.0.0

breakingVersion 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.

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.

affects: >=8.0.0

gotchaThe compiled Capital Framework CSS will not work perfectly in older browsers without being run through Autoprefixer. The README explicitly warns about this necessity.

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`.

affects: *

Errors

Common errors & fixes

Property -webkit-box-sizing is not supported by autoprefixer. Using legacy prefix instead. Autoprefixer will remove this in a future release.

Using a very old version of Autoprefixer or trying to prefix properties that are no longer standard or automatically handled by modern Autoprefixer versions.

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.

NameError: variable @grid_gutter-width is undefined in ...

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.

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.

Error: `npm install less less-plugin-autoprefixer` failed with exit code 1

Issues during installation of `less` or `less-plugin-autoprefixer`, potentially due to Node.js version incompatibility, network issues, or corrupted npm cache.

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.

Upgrade

Version history

11.0.1latest on npm

Audit

Dependencies

lessrequiredRequired to compile Capital Framework's .less source files into CSS.

autoprefixerrequiredCrucial for adding vendor prefixes to compiled CSS for browser compatibility, explicitly noted in the README.

less-plugin-autoprefixerrequiredA Less plugin to integrate Autoprefixer directly into the Less compilation process.

postcss-clioptionalOften used as a command-line tool to run Autoprefixer on compiled CSS, especially if not using a Less plugin for Autoprefixer.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/cfpb/capital-framework ↗

packagehttps://www.npmjs.com/package/capital-framework ↗