{"library":"seed-spacing","title":"Seed Spacing Utilities","description":"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install seed-spacing"],"cli":null},"imports":["@import \"pack/seed-spacing/_index\";","const seedSpacingPack = require('seed-spacing'); // in Node.js/Gulpfile\n// ... .pipe(sass({ includePaths: seedSpacingPack }))","body { margin: spacing(3); }"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const gulp = require('gulp');\nconst sass = require('gulp-sass')(require('sass')); // Using dart-sass for modern Node.js\nconst seedSpacingPack = require('seed-spacing');\n\ngulp.task('compile-sass', function () {\n  return gulp.src('./sass/**/*.scss')\n    .pipe(sass({\n      includePaths: seedSpacingPack // Provides the path to seed-spacing's SCSS files\n    }))\n    .pipe(gulp.dest('./css'));\n});\n\n// --- In your main.scss file (e.g., './sass/main.scss'): ---\n// Packs\n@import \"pack/seed-spacing/_index\";\n\n// Example usage of generated utility classes:\n.my-component {\n  @extend .u-mrg--a-3; // Applies margin-all: 12px; (based on default config)\n  padding-bottom: spacing(5); // Applies padding-bottom: 20px; (using the Sass function)\n}\n\n.responsive-element {\n  @extend .u-pad--v-2; // Vertical padding 8px\n  @extend .u-pad--v@md-4; // Vertical padding 16px at medium breakpoint\n  margin-left: spacing(auto); // Horizontal auto margin for centering\n}\n\n// Customizing variables (optional, typically in a config file before import):\n$seed-spacing-sizes: (\n  sm: 4px,\n  md: 8px,\n  lg: 16px\n) !default;\n","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}