CSS Helper Framework

1.0.2 · active · verified Sun Apr 19

style-helpers is a lightweight CSS utility library providing a collection of pre-defined classes and mixins to streamline common styling tasks for front-end development. It offers solutions for flexbox layouts, animations, button styling, and spacing, aiming to reduce boilerplate CSS. The library is currently at stable version 1.0.2. Given its evolution from 0.x to 1.x and the minimal changelog provided for recent minor versions, it appears to have a relatively slow or infrequent release cadence. Its key differentiator lies in offering a direct, pre-packaged set of common CSS patterns, making it easy to integrate into projects using SCSS or by direct HTML link, focusing on quick application of common styles rather than a full component system.

Common errors

```
ENOENT: no such file or directory, stat '/path/to/your/project/style-helpers.css'
```
cause The HTML `<link>` tag is pointing to an incorrect or non-existent path for the `style-helpers.css` file.

fix Verify the exact path to the CSS file within your `node_modules` directory (e.g., `node_modules/style-helpers/style-helpers.css`) and ensure your HTML link reflects this. For production, use a build tool to copy the file to an asset folder.
```
Module not found: Error: Can't resolve 'style-helpers' in '...' (for JS/SCSS imports)
```
cause Your module bundler or SCSS preprocessor cannot locate the `style-helpers` package in your `node_modules`.

fix Ensure `style-helpers` is listed in your `package.json` and `npm install` has been run. For SCSS, configure your preprocessor to include `node_modules` in its include paths. For JavaScript bundlers, verify your configuration correctly resolves `node_modules`.
```
SyntaxError: The requested module 'style-helpers' does not provide an export named 'someFeature'
```
cause You are attempting to import a named export from `style-helpers` in a JavaScript file, but the library only provides CSS and has no JavaScript exports.

fix Remove any curly braces from the import statement; use `import 'style-helpers';` for its side-effects if you intend to include the CSS via JavaScript bundling, but do not expect any JS variables or functions.

Warnings

breaking The transition from version 0.x to 1.0.0 likely introduced breaking changes in class names or structure, as is common with major version bumps in CSS libraries. Always review the full changelog if upgrading from a pre-1.0 version.
Fix: Consult the official documentation or GitHub changelog for version 1.0.0 to identify specific breaking changes and update your markup or SCSS imports accordingly.
gotcha When importing the stylesheet in HTML using a `<link>` tag, the path to the `style-helpers.css` file must be exact and accessible. A common mistake is assuming a direct root path or incorrect file name within `node_modules`.
Fix: Ensure your `<link>` tag points to the correct relative path, e.g., `./node_modules/style-helpers/style-helpers.css`, or configure your build system to copy the CSS file to a publicly accessible directory and link to that.
gotcha Attempting to import named exports from 'style-helpers' in JavaScript will result in an error because the library is a pure CSS utility and does not expose any JavaScript functions or objects.
Fix: Use a side-effect import statement `import 'style-helpers';` if using a bundler (like Webpack or Vite) to ensure the CSS is included in your build, but do not try to destructure or import specific symbols.

Install

npm install style-helpers npm
yarn add style-helpers yarn
pnpm add style-helpers pnpm

Imports

SCSS Import
wrong:
```
@import 'style-helpers.scss';
```
correct:
```
@import 'style-helpers';
```
This imports the entire stylesheet through your SCSS preprocessor. Ensure your build configuration includes `node_modules` as an include path for Sass.
HTML Link
wrong:
```
<link href="/style-helpers.css" rel="stylesheet" type="text/css">
```
correct:
```
<link href="./node_modules/style-helpers/style-helpers.css" rel="stylesheet" type="text/css">
```
The exact path `style-helpers.css` inside `node_modules` is an assumption; verify the main CSS file name. For production, consider copying this file to your `dist` folder during a build step.
JavaScript Side-Effect Import
wrong:
```
import { someClass } from 'style-helpers';
```
correct:
```
import 'style-helpers';
```
This library provides global CSS styles and utility classes; it does not export JavaScript symbols. The import statement is purely for its side-effects to include the CSS in a bundler's output (e.g., Webpack, Vite).

Quickstart

This quickstart demonstrates how to include `style-helpers` via an HTML link tag and apply some of its utility classes like `is-flex`, `is-flex-center`, `is-m-1` for margin, and `is-button` for styling a button.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Style Helpers Quickstart</title>
  <!-- Link to the style-helpers CSS file -->
  <!-- For development, you can link directly from node_modules if served statically -->
  <link href="./node_modules/style-helpers/style-helpers.css" rel="stylesheet" type="text/css">
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }
    .my-card {
      border: 1px solid #eee;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      background-color: white;
    }
  </style>
</head>
<body>

  <div class="is-flex is-flex-center is-flex-align-items-center is-flex-wrap is-m-2" style="min-height: 200px; background-color: #f9f9f9;">
    <div class="my-card is-m-1">
      <h1 class="is-m-0">Hello World!</h1>
      <p>This is a paragraph with default styling.</p>
      <button class="is-button is-button-primary">Primary Button</button>
    </div>
    <div class="my-card is-m-1">
      <p class="is-m-0">Another card demonstrating flexbox and spacing helpers.</p>
      <button class="is-button">Default Button</button>
      <p class="is-m-t-2 has-fade-in">Fades in after load!</p>
    </div>
  </div>

</body>
</html>

view raw JSON →