Registry / web-framework / basscss-type-scale

basscss-type-scale

library1.0.6jsnpmunverified

basscss-type-scale is a utility CSS package that provides a set of font-size utilities, enabling developers to apply a consistent type scale using atomic classes like `.h1` through `.h6`. It is a module within the broader Basscss ecosystem, which is a low-level CSS toolkit emphasizing small, composable, and utility-first CSS. The package is currently at version `1.0.6`. The core Basscss project reached `v8` in February 2016 and is considered "feature complete," meaning it is stable with no planned major breaking changes or new features. This implies `basscss-type-scale` is also in a maintenance state. It differentiates itself by providing a flexible way to visually scale font sizes independent of semantic HTML elements, promoting consistency in component-based UI architectures without altering the document structure.

web-framework

npm install basscss-type-scale

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BASSCSS-TYPE-SCALE

basscss-type-scale

web-frameworkjavascriptv1.0.6

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.

styles

✓ import 'basscss-type-scale/css/basscss-type-scale.css';

✗ import { h1 } from 'basscss-type-scale';

This package provides CSS utility classes, not JavaScript exports. Styles are typically imported directly into a modern JavaScript/TypeScript build system (e.g., Webpack, Vite) which handles CSS loading.

minifiedStyles

✓ import 'basscss-type-scale/css/basscss-type-scale.min.css';

For production builds, importing the minified CSS version is recommended. Verify the exact path within `node_modules` as it can vary slightly between package versions.

cssImportRule

✓ @import 'basscss-type-scale/css/basscss-type-scale.css';

This CSS `@import` rule is used within another CSS or preprocessor file (e.g., Sass, Less) to include the type scale utilities. It is not a JavaScript `import` statement.

Demonstrates how to include and use the Basscss type scale utility classes in an HTML document to apply consistent font sizes to various elements.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basscss Type Scale Example</title>  <link rel="stylesheet" href="./node_modules/basscss-type-scale/css/basscss-type-scale.css">   </head> <body> <h1>Semantic H1</h1> <p class="h1">Pastrami 1 - Visually an h1, but semantically a paragraph.</p> <h2>Semantic H2</h2> <p class="h2">Pastrami 2 - Visually an h2, but semantically a paragraph.</p> <h2 class="h1">Larger than default h2 style, but semantically correct.</h2> <p class="h3">Pastrami 3</p> <p class="h4">Pastrami 4</p> <p class="h5">Pastrami 5</p> <p class="h6">Pastrami 6</p> </body> </html>

Debug

Known issues

breakingIn Basscss v7.0.0, the `type-scale` module was separated from `base-typography`. If you were relying on it being implicitly included with `base-typography` in earlier Basscss versions, you must now explicitly import or link `basscss-type-scale` as a standalone module.

fix

Ensure `basscss-type-scale` is explicitly included in your project's CSS imports or HTML `<link>` tags, separate from any `base-typography` imports.

affects: >=7.0.0

gotcha`basscss-type-scale` provides only CSS utility classes for font sizing. It has no JavaScript API or exports. Attempts to `import { ... } from 'basscss-type-scale'` for JavaScript symbols will result in errors.

fix

This package is for CSS inclusion only. Include it via CSS `@import`, `<link>` tag, or through a build tool's CSS loader, not as a JavaScript module.

affects: >=1.0.0

gotchaBasscss v8, which is the foundational project for this module, is explicitly declared as 'feature complete' and the 'final version' as of February 2016. This means `basscss-type-scale` should be considered extremely stable but will not receive new features or significant updates.

fix

Plan for long-term stability and minimal maintenance. Do not expect new features or active development beyond critical bug fixes, if any.

affects: >=1.0.0

gotchaOverusing utility classes for semantic elements (e.g., using `.h1` on a `<p>` tag) can lead to potential accessibility issues if screen readers or assistive technologies rely on the semantic structure rather than visual styling.

fix

Use utility classes to augment semantic HTML where appropriate (e.g., `<h2 class="h1">`) rather than replacing semantic elements entirely. Prioritize semantic HTML for document structure and use utilities for visual presentation.

affects: >=1.0.0

gotchaBasscss and its modules like `basscss-type-scale` are designed with low selector specificity. Mixing with other CSS frameworks or custom styles that have higher specificity can lead to unexpected style overrides or styles not applying as intended.

fix

Be mindful of CSS specificity. Ensure Basscss styles are loaded after any base resets or custom styles you intend for it to override, or use more specific selectors in your custom CSS if overriding Basscss is desired. Avoid using contextual or nested selectors to maintain low specificity.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'basscss-type-scale' in '...' OR Can't resolve 'basscss-type-scale/css/basscss-type-scale.css' in '...'

The `basscss-type-scale` package is either not installed, or the import path for its CSS file is incorrect.

fix

Ensure `basscss-type-scale` is installed (`npm install basscss-type-scale` or `yarn add basscss-type-scale`). Verify the exact path to the CSS file in your `node_modules` directory and update your import statement accordingly (e.g., `import 'basscss-type-scale/css/basscss-type-scale.css';`).

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Your build tool (e.g., Webpack, Parcel) is encountering a CSS file but does not have a configured loader (like `css-loader` and `style-loader`) to process it.

fix

Install the necessary CSS loaders (`npm install --save-dev css-loader style-loader`) and configure your build tool (e.g., `webpack.config.js`) to use them for `.css` files.

CSS classes (e.g., .h1, .h2) from basscss-type-scale are not applying their styles in the browser.

This is likely due to CSS specificity conflicts, incorrect class names, or the stylesheet not being loaded in the browser.

fix

Inspect the element in browser developer tools to check if the class is present and if its styles are being overridden. Ensure the `basscss-type-scale` stylesheet is correctly linked/imported and loaded after any default browser styles or conflicting global styles. Double-check class names for typos.

Upgrade

Version history

1.0.6latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/basscss/basscss ↗

packagehttps://www.npmjs.com/package/basscss-type-scale ↗

homepagehttps://basscss.com ↗