denali-css

library2.5.1jsnpmunverified

Denali CSS is a lightweight, flexible CSS framework developed by Verizon Media (now Yahoo) for implementing the Denali Design System. Current stable version is 2.5.1. It uses SCSS source files, supports theming via CSS custom properties, and is framework-agnostic. It offers a comprehensive set of UI components (buttons, forms, navigation, etc.) and is optimized for internal enterprise products. Release cadence is irregular; last update was in 2023. Unlike Bootstrap or Materialize, it is purpose-built for Denali's design language and emphasizes simplicity and customizability through variables.

devops design

npm install denali-css

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DENALI-CSS

denali-css

devopsjavascriptv2.5.1

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.

All CSS

✓ import 'denali-css/dist/denali.css';

✗ import Denali from 'denali-css';

denali-css is a CSS library; no JavaScript exports. Use a direct CSS import or link tag in HTML.

Sass source

✓ @import 'denali-css/src/denali.scss';

✗ @import 'denali-css/denali';

When using SCSS, import from the src directory. The path may vary based on build tooling.

NPM install

✓ npm install denali-css

✗ npm install denali-css --save-dev

It's a runtime dependency for styling; --save-dev is incorrect if used in production.

CDN usage: include the denali.css stylesheet via jsDelivr and use framework classes like btn and card.

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/denali-css@2.5.1/dist/denali.css"> </head> <body> <button class="btn">Button</button> <div class="card">Card content</div> </body> </html>

Debug

Known issues

breakingBreaking changes between v1 and v2: many class names were renamed and the grid system overhauled.

fix

Review the migration guide: https://denali-design.github.io/denali-css/?path=/docs/migration-v2--page

affects: >=2.0.0

gotchaSass compilation requires Dart Sass (not Ruby Sass or Node Sass) since v2.

fix

Use Dart Sass: npm install sass, and compile with sass command.

affects: >=2.0.0

deprecatedThe .denali- prefix classes are deprecated in v2, replaced by unprefixed names.

fix

Replace .denali-btn with .btn, .denali-card with .card, etc.

affects: >=2.0.0

gotchaCSS custom properties (variables) are scoped to :root? They are actually scoped to .denali-css class on a wrapper element.

fix

Wrap your app in a div with class 'denali-css' to inherit theme variables.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Undefined variable: "$primary-color"

SCSS variable not available because the framework's variables are not imported correctly.

fix

Ensure you import 'denali-css/src/denali.scss' and that your build pipeline processes SCSS.

Module not found: Error: Can't resolve 'denali-css'

Import path is wrong; you're trying to import a JS module from a CSS-only package.

fix

Use a CSS import: import 'denali-css/dist/denali.css' in your JavaScript file.

Warning: (deprecation) The 'denali-btn' class is deprecated; use 'btn' instead.

Using old v1 class names that are deprecated since v2.

fix

Update HTML to use unprefixed class names (e.g., btn instead of denali-btn).

Upgrade

Version history

2.5.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

44 hits · last 30 days

node

Perplexity

Resources

githubssh://git@github.com/denali-design/denali-css ↗

packagedenali-css ↗

homepagehttps://github.com/denali-design/denali-css#readme ↗