Registry / web-framework / seed-spacing

seed-spacing

JSON →
library0.4.3jsnpmunverified

Seed Spacing is a Sass (SCSS) utility pack that provides a comprehensive set of classes and a helper function for managing consistent margins and padding within projects built with the Seed CSS framework. It offers granular control over spacing values, directions, and responsive breakpoints. Currently at version 0.4.3, its release cadence is tied to updates in its core dependencies, particularly `seed-breakpoints`, making releases somewhat infrequent but purposeful. A key differentiator is its modular design, allowing developers to configure namespaces and define their own spacing scales via Sass variables, reducing unnecessary CSS output. It emphasizes functional CSS principles and integrates seamlessly into Sass build pipelines, generating utility classes and a `spacing($size)` function for use in custom SCSS. This approach ensures design consistency and optimizes stylesheet size.

web-frameworkserialization
npm install seed-spacing
github ↗package ↗
INSTALL
IMPORT
SIG · SEED-SPACING
S
seed-spacing
web-frameworkjavascriptv0.4.3
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.

seed-spacing SCSS import
✓ @import "pack/seed-spacing/_index";
✗ @import "seed-spacing/__all";
This is the primary way to include `seed-spacing` in your Sass project. The import path changed in v0.1.0, introducing the `pack/` namespace and renaming the main file from `__all` to `_index`.
Gulp includePaths
✓ const seedSpacingPack = require('seed-spacing'); // in Node.js/Gulpfile // ... .pipe(sass({ includePaths: seedSpacingPack }))
✗ import seedSpacingPack from 'seed-spacing';
When integrating with Node.js build tools like Gulp (specifically `gulp-sass`), `require()` is used to obtain the package's include path. This package does not export a JavaScript API for direct consumption outside of its build-tooling context.
spacing() function
✓ body { margin: spacing(3); }
✗ body { margin: $seed-spacing-sizes-3; }
The `spacing()` Sass function should be used to apply predefined spacing values from the `$seed-spacing-sizes` map within your custom SCSS, ensuring consistency and adherence to the defined scale. Directly accessing internal Sass map values or generating ad-hoc values is discouraged.

Demonstrates how to integrate `seed-spacing` into a Gulp build pipeline using `gulp-sass`, showing both JavaScript configuration and illustrative SCSS usage of utility classes, the `spacing()` function, and responsive modifiers.

const gulp = require('gulp'); const sass = require('gulp-sass')(require('sass')); // Using dart-sass for modern Node.js const seedSpacingPack = require('seed-spacing'); gulp.task('compile-sass', function () { return gulp.src('./sass/**/*.scss') .pipe(sass({ includePaths: seedSpacingPack // Provides the path to seed-spacing's SCSS files })) .pipe(gulp.dest('./css')); }); // --- In your main.scss file (e.g., './sass/main.scss'): --- // Packs @import "pack/seed-spacing/_index"; // Example usage of generated utility classes: .my-component { @extend .u-mrg--a-3; // Applies margin-all: 12px; (based on default config) padding-bottom: spacing(5); // Applies padding-bottom: 20px; (using the Sass function) } .responsive-element { @extend .u-pad--v-2; // Vertical padding 8px @extend .u-pad--v@md-4; // Vertical padding 16px at medium breakpoint margin-left: spacing(auto); // Horizontal auto margin for centering } // Customizing variables (optional, typically in a config file before import): $seed-spacing-sizes: ( sm: 4px, md: 8px, lg: 16px ) !default;
Debug
Known issues
breakingThe `xl` responsive size was entirely removed, and the default `1-5em` sizes were eliminated from the configuration map. Projects relying on these specific defaults or the `xl` breakpoint will need to adjust their SCSS configurations and class usage accordingly.
fix
Review your `$seed-spacing-sizes` and `seed-breakpoints` configurations. If you require `xl` or default `1-5em` sizes, you must explicitly define them in your project's Sass configuration.
affects: >=0.4.1
breakingThe naming convention for breakpoint/responsive classes changed significantly. Previously, suffixes like `--at-size` (e.g., `u-mrg--at-md-3`) were used; these have been updated to use an `@size` suffix (e.g., `u-mrg@md-3`). This change was inherited from `seed-breakpoints` v0.3.0.
fix
Update all instances of responsive utility classes in your HTML and SCSS from the `prefix--at-size` format to the new `prefix@size` convention (e.g., `u-mrg--at-md-3` becomes `u-mrg@md-3`).
affects: >=0.2.0
breakingThe primary SCSS entry file was renamed from `__all.scss` to `__index.scss`, and the recommended `@import` path changed to include a `pack/` namespace. Using old import paths will result in compilation errors.
fix
Update your SCSS `@import` statements from `@import "seed-spacing/__all";` to the new standard: `@import "pack/seed-spacing/_index";`.
affects: >=0.1.0
gotchaVersion 0.3.1 introduced `!important` to auto classes for margin (e.g., `u-mrg--h-auto`). While intended to enable responsive auto classes to work with non-auto classes, this can increase CSS specificity, potentially overriding other styles unexpectedly.
fix
Be mindful of increased specificity when using `auto` margin classes. If specificity conflicts arise, consider refining your selectors, adjusting the order of your CSS imports, or providing more specific overrides where necessary.
affects: >=0.3.1
Errors
Common errors & fixes
Error: File to import not found or unreadable: seed-spacing/__all
Attempting to import the `seed-spacing` pack using the deprecated `__all.scss` filename and path after upgrading to v0.1.0 or later.
fix
Update your SCSS `@import` statement to `@import "pack/seed-spacing/_index";`.
CSS class `u-mrg--at-lg-5` does not apply expected styles, or `u-pad--at-sm-2` is not recognized.
Using the old `--at-size` breakpoint class naming convention (e.g., `--at-md`) after upgrading to v0.2.0 or later, where the convention changed to `@size` (e.g., `@md`).
fix
Locate and update all instances of responsive utility class names in your HTML and SCSS to use the new `@size` format (e.g., `u-mrg@lg-5`, `u-pad@sm-2`).
Undefined variable or function named 'spacing'.
The `seed-spacing` SCSS pack is not correctly imported into your main stylesheet, or the `spacing()` function is called with a key not defined in the `$seed-spacing-sizes` Sass map.
fix
Ensure `seed-spacing` is correctly imported via `@import "pack/seed-spacing/_index";` in your SCSS. Also, verify that the argument passed to `spacing()` (e.g., `spacing(3)`) corresponds to a valid key in your `$seed-spacing-sizes` map.
Upgrade
Version history
0.4.3latest on npm
Audit
Dependencies
seed-breakpointsrequiredProvides responsive breakpoint definitions for generated spacing classes, enabling responsive spacing utilities.
seed-propsrequiredIndirect dependency of seed-breakpoints, used for property-value mapping within the Seed ecosystem.
Agent activity
2 hits · last 30 days
node
2
Resources
githubhttps://github.com/helpscout/seed-spacing ↗
packagehttps://www.npmjs.com/package/seed-spacing ↗
seed-spacing — npm install seed-spacing · libregistry