Registry / style-helpers

style-helpers

JSON →
library1.0.2jsnpmunverified

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.

npm install style-helpers
github ↗package ↗
INSTALL
IMPORT
SIG · STYLE-HELPERS
S
style-helpers
javascriptv1.0.2
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.

SCSS Import
✓ @import 'style-helpers';
✗ @import 'style-helpers.scss';
This imports the entire stylesheet through your SCSS preprocessor. Ensure your build configuration includes `node_modules` as an include path for Sass.
HTML Link
✓ <link href="./node_modules/style-helpers/style-helpers.css" rel="stylesheet" type="text/css">
✗ <link href="/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
✓ import 'style-helpers';
✗ import { someClass } from '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).

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>
Debug
Known issues
breakingThe 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.
affects: >=1.0.0
gotchaWhen 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.
affects: >=0.1.0
gotchaAttempting 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.
affects: >=0.1.0
Errors
Common errors & fixes
ENOENT: no such file or directory, stat '/path/to/your/project/style-helpers.css'
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)
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'
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.
Upgrade
Version history
1.0.2latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
3 hits · last 30 days
node
2
Resources
githubhttps://github.com/LouisMazel/style-helpers ↗
packagehttps://www.npmjs.com/package/style-helpers ↗
style-helpers — npm install style-helpers · libregistry