Registry / testing / claritas-web-framework

claritas-web-framework

library8.7.0jsnpmunverified

Claritas Web Framework is a CSS framework built for the Claritas front end, now at version 8.7.0. It provides utility classes, components, and a grid system tailored for internal product styling. The framework is not actively maintained for external use, as it is tightly coupled with Claritas design tokens and conventions. Release cadence is ad-hoc, driven by internal product needs. Key differentiators include deep integration with Claritas visual language and minimal overhead, though alternatives like Tailwind or Bootstrap offer broader community support and documentation.

testing

npm install claritas-web-framework

package ↗

INSTALL

IMPORT

SIG · CLARITAS-WEB-FRAME

claritas-web-framework

testingjavascriptv8.7.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

claritas-web-framework

✓ import 'claritas-web-framework'

✗ const claritas = require('claritas-web-framework')

No JS exports; simply import the CSS.

ClaritasGrid

✓ import { ClaritasGrid } from 'claritas-web-framework'

✗ import ClaritasGrid from 'claritas-web-framework'

Named export for grid component, available in v8+.

ClaritasButton

✓ import { ClaritasButton } from 'claritas-web-framework'

✗ const ClaritasButton = require('claritas-web-framework').ClaritasButton

ESM-only module; require() will fail in Node <20.

Imports CSS and two components (grid and button) to render a simple UI.

// index.js import 'claritas-web-framework/css/base.css'; import { ClaritasGrid, ClaritasButton } from 'claritas-web-framework'; document.getElementById('app').innerHTML = `<div class="c-grid"><button class="c-btn">Click</button></div>`; // Or if using a bundler, import main entry: import 'claritas-web-framework';

Debug

Known issues

breakingv8 changed CSS class prefix from 'cf-' to 'c-'.

fix

Update all class references: .cf-grid -> .c-grid, .cf-btn -> .c-btn.

affects: >=8.0.0

breakingv8 removed default export; only named exports exist.

fix

Use import { ClaritasButton } from 'claritas-web-framework' instead of import CWF from ...

affects: >=8.0.0

deprecatedv6 deprecated 'ClaritasContainer' component; use 'ClaritasBox' instead.

fix

Replace <ClaritasContainer> with <ClaritasBox> in JSX.

affects: >=6.0.0 <8.0.0

gotchaCSS variables are not supported in IE11; ensure polyfill if targeting legacy browsers.

fix

Add a CSS vars polyfill or compile styles with PostCSS.

affects: >=7.0.0

gotchaTree-shaking not supported; importing any component includes the entire CSS bundle.

fix

Manually import only the CSS files you need from 'claritas-web-framework/css/' folder.

affects: *

Errors

Common errors & fixes

Error: Cannot find module 'claritas-web-framework'

Package not installed correctly or missing from node_modules.

fix

Run 'npm install claritas-web-framework@8.7.0' and ensure you're in the correct directory.

TypeError: claritas_default.default is not a function

Trying to default import from a module that has no default export in v8+.

fix

Use named imports: import { ClaritasButton } from 'claritas-web-framework'.

Unknown class 'cf-btn' in template

CSS prefix changed in v8 from 'cf-' to 'c-'.

fix

Update class references: replace 'cf-btn' with 'c-btn'.

Failed to resolve import "claritas-web-framework" from "src/App.js". Does the file exist?

Bundler (e.g., Vite) cannot resolve the package; possibly missing from dependencies or package.json typo.

fix

Check package.json for 'claritas-web-framework' and ensure it's listed under dependencies.

Upgrade

Version history

8.7.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

packageclaritas-web-framework ↗