seed-list

    0.0.18 • Public • Published

    seed-list Build Status npm version Dependency Status

    List component pack for Seed!

    Install

    npm install seed-list --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 pack = require('seed-list');
     
    gulp.task('sass', function () {
      return gulp.src('./sass/**/*.scss')
        .pipe(sass({
          includePaths: pack
        }))
        .pipe(gulp.dest('./css'));
    });

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

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

    Note: Because seed-list has dependencies, its includePaths output will be an array. If you're including other paths in addition to seed-grid, 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 seedList = require('seed-list');
    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',
            seedList
          )
        }))
        .pipe(gulp.dest('./css'));
    });

    Options

    The following variables can be found in _config.scss

    // Namespaces 
    $seed-list-namespace: "c-list" !default;
    $seed-list-item-namespace: #{$seed-list-namespace}__item !default;
    $seed-list-bordered-namespace: bordered !default;
    $seed-list-block-namespace: block !default;
    $seed-list-bullet-namespace: bullet !default;
    $seed-list-dotted-namespace: dotted !default;
    $seed-list-inline-namespace: inline !default;
    $seed-list-number-namespace: number !default;
     
    // Sizes 
    $seed-list-size-default: spacing(1) !default;
    $seed-list-offset-left: 12px !default;
     
    $seed-list-sizes: (
      xs: 0,
      sm: ceil(spacing(1) / 2),
      md: $seed-list-size-default,
      lg: spacing(2),
      xl: spacing(4)
    !default;

    Install

    npm i seed-list

    DownloadsWeekly Downloads

    115

    Version

    0.0.18

    License

    MIT

    Unpacked Size

    26.6 kB

    Total Files

    30

    Last publish

    Collaborators

    • itsjonq