Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including seed-spacing with all npm packages installed. Try it out:

var seedSpacing = require("seed-spacing")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

seed-spacing v0.4.3

Spacing utility pack for Seed

seed-spacing Build Status npm version Dependency Status

Spacing utility pack for Seed!

Install

npm install seed-spacing --save

Documentation

Check out our styleguide for documentation of this pack.

Basic Usage

SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

var gulp = require('gulp');
var sass = require('gulp-sass');
var pack = require('seed-spacing');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({
      includePaths: pack
    }))
    .pipe(gulp.dest('./css'));
});

Once that is setup, simply @import seed-spacing as needed in your .scss file:

// Packs
@import "pack/seed-spacing/_index";

Options

The following variables can be found in _config.scss

// Namespace
$seed-spacing-margin-namespace: "u-mrg" !default;
$seed-spacing-padding-namespace: "u-pad" !default;

// Sizes
$seed-spacing-sizes: (
  0: 0,
  1: 4px,
  2: 8px,
  3: 12px,
  4: 16px,
  5: 20px,
  6: 24px,
  7: 28px,
  8: 32px,
  9: 36px,
  10: 40px,
  auto: (auto),
) !default;

// Directions
$seed-spacing-directions: (
  none:   0,
  all:    "a",
  top:    "t",
  right:  "r",
  bottom: "b",
  left:   "l",
  hor:    "h",
  vert:   "v"
) !default;
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free