seed-list
v0.0.18
Published
List component pack for Seed
Downloads
3,403
Maintainers
Readme
seed-list
![Dependency Status](https://david-dm.org/helpscout/seed-list.svg)
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;