Newly Potted Mandrakes

    seed-width

    0.4.3 • Public • Published

    seed-width Build Status npm version Dependency Status

    Width utility pack for Seed!

    Install

    npm install seed-width --save
    

    Documentation

    Check out our 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 seedWidth = require('seed-width');
     
    gulp.task('sass', function () {
      return gulp.src('./sass/**/*.scss')
        .pipe(sass({
          includePaths: seedWidth
        }))
        .pipe(gulp.dest('./css'));
    });

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

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

    Note: Because seed-width has dependencies, it's includePaths output will be an array. If you're including other paths in addition to seed-width, you will need to flatten the array. An easy way to do this is to use sass-pathfinder.

    Example with sass-pathfinder:

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var seedWidth = require('seed-width');
    var pathfinder = require('sass-pathfinder');
     
    gulp.task('sass', function () {
      return gulp.src('./sass/**/*.scss')
        .pipe(sass({
          includePaths: pathfinder(
            './scss/vendor/example',
            './scss/plugins/super-awesome-plugin',
            seedWidth
          )
        }))
        .pipe(gulp.dest('./css'));
    });

    Options

    The following variables can be found in _config.scss

    // Namespace
    $seed-width-namespace: "u-width" !default;
     
    // Widths
    $seed-widths: (
      0: 0%,
      1: 8.33333%,
      2: 16.66667%,
      3: 25%,
      4: 33.33333%,
      5: 41.66667%,
      6: 50%,
      7: 58.33333%,
      8: 66.66667%,
      9: 75%,
      10: 83.33333%,
      11: 91.66667%,
      12: 100%,
    ) !default;

    Install

    npm i seed-width

    DownloadsWeekly Downloads

    394

    Version

    0.4.3

    License

    MIT

    Last publish

    Collaborators

    • itsjonq