Basscss Type Scale

1.0.6 · maintenance · verified Sun Apr 19

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.

Common errors

```
Module not found: Error: Can't resolve 'basscss-type-scale' in '...' OR Can't resolve 'basscss-type-scale/css/basscss-type-scale.css' in '...'
```
cause 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
```
cause 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.
```
cause 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.

Warnings

breaking In 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.
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.
gotcha Basscss 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.
gotcha Overusing 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.
gotcha Basscss 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.

Install

npm install basscss-type-scale npm
yarn add basscss-type-scale yarn
pnpm add basscss-type-scale pnpm

Imports

styles
wrong:
```
import { h1 } from 'basscss-type-scale';
```
correct:
```
import 'basscss-type-scale/css/basscss-type-scale.css';
```
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.

Quickstart

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

<!-- Include Basscss type scale CSS in your HTML file (e.g., via CDN or local build) -->
<!-- For local usage in a project with a bundler, you would typically `import 'basscss-type-scale/css/basscss-type-scale.css';` in your main JS/TS entry file -->

<!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>
  <!-- Example: Linking directly from node_modules for illustration, or a build output -->
  <link rel="stylesheet" href="./node_modules/basscss-type-scale/css/basscss-type-scale.css">
  <!-- If using the full Basscss, it might be: -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/basscss@8.0.2/css/basscss.min.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>

view raw JSON →