open-index/open-npm huggingface dataset:
npm package: @seedcss/seed-list
Description: List component pack for Seed
Latest version: 1.0.1

# seed-list

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-list.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-list)

> List component pack for Seed

## Install

```
npm install @seedcss/seed-list --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-list/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-list");

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

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

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



## Options

The following variables can be found in `_config.scss`

```scss
// List :: Config

// 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: 4px !default;
$seed-list-offset-left: 16px !default;

$seed-list-sizes: (
  xs: 0,
  sm: 2px,
  md: $seed-list-size-default,
  lg: 8px,
  xl: 16px,
) !default;

```
npm package: @seedcss/seed-modal
Description: Modal component pack for Seed
Latest version: 1.0.1

# seed-modal

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-modal.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-modal)

> Modal component pack for Seed

## Install

```
npm install @seedcss/seed-modal --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-modal/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-modal");

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

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

```scss
// Packs
@import "pack/seed-modal/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Modal :: Config

// Namespaces
$seed-modal-namespace: modal !default;
$seed-modal-backdrop-namespace: modal-backdrop !default;
$seed-modal-content-namespace: modal-content !default;
$seed-modal-dialog-namespace: modal-dialog !default;
$seed-modal-scrollbar-measure-namespace: modal-scrollbar-measure !default;
// Config: Modal
$seed-modal-z-index: 1050 !default;
// Config: Modal backdrop
$seed-modal-backdrop-background-color: #000 !default;
$seed-modal-backdrop-opacity-in: 0.5;
$seed-modal-backdrop-z-index: 1040;
// Config: Modal content
$seed-modal-content-box-shadow: 0 3px 9px rgba(black, 0.4) !default;
// Config: Modal dialog
$seed-modal-dialog-margin: 10px !default;
$seed-modal-dialog-margin-md: 30px auto !default;
$seed-modal-dialog-sizes: (
  sm: 300px,
  md: 600px,
  lg: 900px,
) !default;

```
npm package: @seedcss/seed-nav
Description: Nav component pack for Seed
Latest version: 1.0.1

# seed-nav

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-nav.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-nav)

> Nav component pack for Seed

## Install

```
npm install @seedcss/seed-nav --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-nav/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-nav");

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

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

```scss
// Packs
@import "pack/seed-nav/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
@import "pack/seed-color-scheme/__index";

// Namespaces
$seed-nav-namespace: c-nav !default;
$seed-nav-item-namespace: #{$seed-nav-namespace}__item !default;
$seed-nav-link-namespace: #{$seed-nav-namespace}__link !default;
$seed-nav-hover-namespace: #{$seed-nav-namespace}--hover !default;
$seed-nav-tabs-namespace: #{$seed-nav-namespace}--tabs !default;
$seed-nav-link-active-namespace: is-active !default;
$seed-nav-link-disabled-namespace: is-disabled !default;
$seed-nav-link-font-weight: 400 !default;

// Configs
$seed-nav-link-padding: 16px 20px !default;
$seed-nav-link-color: #4f5d6b !default;
$seed-nav-link-active-color: _color(blue, 500) !default;
$seed-nav-link-active-font-weight: 700 !default;
$seed-nav-link-disabled-color: #E3E8EB !default;

$seed-nav-link-hover-background-color: #e3e8eb !default;

$seed-nav-tabs-link-border-width: 2px !default;
$seed-nav-tabs-link-color: #a5b2bd !default;
$seed-nav-tabs-link-active-color: #2a3b47 !default;
$seed-nav-tabs-link-active-border-color: _color(blue, 500) !default;
$seed-nav-tabs-link-active-font-weight: $seed-nav-link-font-weight !default;

// Alignment
$seed-nav-alignment: (
  left: flex-start,
  center: center,
  right: flex-end,
) !default;

// Orientation
$seed-nav-orientation: (
  list: row,
  stacked: column,
) !default;

// Sizes
$seed-nav-sizes: (
  xs: 4px 20px,
  sm: 8px 20px,
  md: 12px 20px,
  lg: $seed-nav-link-padding,
) !default;

// Item Alignment
$seed-nav-item-alignment: (
  left: margin-right,
  right: margin-left,
) !default;

```
npm package: @seedcss/seed-navbar
Description: Navbar component pack for Seed
Latest version: 1.0.1

# seed-navbar

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-navbar.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-navbar)

> Navbar component pack for Seed

## Install

```
npm install @seedcss/seed-navbar --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-navbar/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-navbar");

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

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

```scss
// Packs
@import "pack/seed-navbar/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// navbar :: Config

// Namespaces
$seed-navbar-namespace: c-navbar !default;
$seed-navbar-brand-namespace: #{$seed-navbar-namespace}__brand !default;
$seed-navbar-collapse-namespace: collapse !default; // From Bootstrap
$seed-navbar-collapsing-namespace: collapsing !default; // From Bootstrap
$seed-navbar-header-namespace: #{$seed-navbar-namespace}__header !default;
$seed-navbar-item-namespace: #{$seed-navbar-namespace}__item !default;
$seed-navbar-toggle-namespace: #{$seed-navbar-namespace}__toggle !default;
$seed-navbar-toggle-icon-namespace: #{$seed-navbar-namespace}__toggle-icon !default;

// Configs
$seed-navbar-min-height: 48px! default;
$seed-navbar-brand-font-size: 1.25rem !default;
$seed-navbar-brand-margin-right: 1rem !default;
$seed-navbar-toggle-icon-size: 20px !default;
$seed-navbar-toggle-icon-border-color: #4F5D6B !default;

```
npm package: @seedcss/seed-opacity
Description: Opacity utility pack for Seed
Latest version: 1.0.1

# seed-opacity

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-opacity.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-opacity)

> Opacity utility pack for Seed

## Install

```
npm install @seedcss/seed-opacity --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-opacity/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-opacity");

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

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

```scss
// Packs
@import "pack/seed-opacity/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Opacity :: Config

// Namespaces
$seed-opacity-namespace: "u-op" !default;

// Opacity
$seed-opacity: (
  0: 0,
  1: 0.1,
  2: 0.2,
  3: 0.3,
  4: 0.4,
  5: 0.5,
  6: 0.6,
  7: 0.7,
  8: 0.8,
  9: 0.9,
  10: 1
) !default;

```
npm package: @seedcss/seed-option-card
Description: Option card component pack for Seed
Latest version: 1.0.1

# seed-option-card

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-option-card.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-option-card)

> Option card component pack for Seed

## Install

```
npm install @seedcss/seed-option-card --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-option-card/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-option-card");

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

Once that is setup, simply `@import` **seed-option-card** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-option-card/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// option-card :: Config
@import "pack/seed-color-scheme/__index";

// Namespaces
$seed-option-card-namespace: c-option-card !default;
$seed-option-card-label-namespace: #{$seed-option-card-namespace}__label !default;
$seed-option-card-selector-namespace: #{$seed-option-card-namespace}__selector !default;

// Config
$seed-option-card-background-color-active: rgba(black, 0.025) !default;
$seed-option-card-border-color: #ddd !default;
$seed-option-card-border-hover-color: #ccc !default;
$seed-option-card-border-focus-color: _color(blue, 500) !default;
$seed-option-card-box-shadow-focus: 0 0 0 2px rgba($seed-option-card-border-focus-color, 0.2) !default;
$seed-option-card-border-size-focus: 2px !default;

```
npm package: @seedcss/seed-overflow
Description: Overflow utility pack for Seed
Latest version: 1.0.1

# seed-overflow

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-overflow.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-overflow)

> Overflow utility pack for Seed

## Install

```
npm install @seedcss/seed-overflow --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-overflow/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-overflow");

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

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

```scss
// Packs
@import "pack/seed-overflow/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Overflow :: Config

// Namespaces
$seed-overflow-namespace: "u-overflow" !default;
$seed-overflow-x-namespace: "u-overflow-x" !default;
$seed-overflow-y-namespace: "u-overflow-y" !default;

// Overflow
$seed-overflow: (
  visible: visible,
  hidden: hidden,
  scroll: scroll,
  auto: auto
) !default;

$seed-overflow-x: (
  visible: visible,
  hidden: hidden,
  scroll: scroll,
  auto: auto
) !default;

$seed-overflow-y: (
  visible: visible,
  hidden: hidden,
  scroll: scroll,
  auto: auto
) !default;

```
npm package: @seedcss/seed-pagination
Description: Pagination component pack for Seed
Latest version: 1.0.1

# seed-pagination

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-pagination.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-pagination)

> Pagination component pack for Seed

## Install

```
npm install @seedcss/seed-pagination --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-pagination/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-pagination");

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

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

```scss
// Packs
@import "pack/seed-pagination/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Pagination :: Config

// Dependencies
@import "pack/seed-button/config";
@import "pack/seed-color-scheme/config";
@import "pack/seed-dash/_index";

// Namespaces
$seed-pagination-namespace: c-pagination !default;
$seed-pagination-item-namespace: #{$seed-pagination-namespace}__item !default;
$seed-pagination-link-namespace: #{$seed-pagination-namespace}__link !default;

// Configs
$seed-pagination-border-radius: $seed-button-border-radius !default;
$seed-pagination-padding: 0 0.75em !default;
// $seed-button-color config:
// https://github.com/helpscout/seed-button#options
$seed-pagination-link-color: _extend(_color(button, default), (
  background: (
    default: #fff,
    hover: #f9f9f9,
    active: _color(link, base),
    active-hover: _color(link, hover),
  ),
  border: (
    default: #ddd,
    hover: #ddd,
    active: _color(link, base),
    focus: _color(link, base),
    active-hover: _color(link, hover),
  ),
  box-shadow: (
    focus: 0 0 0 1px rgba(white, 0.4) inset,
  ),
  text: (
    default: _color(link, base),
    hover: #1F5E89,
    active: #fff,
    disabled: #72808E,
  ),
)) !default;

// Alignment
$seed-pagination-alignment: (
  left: flex-start,
  center: center,
  right: flex-end,
) !default;

```
npm package: @seedcss/seed-popover
Description: Popover component pack for Seed
Latest version: 1.0.1

# seed-popover

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-popover.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-popover)

> Popover component pack for Seed

## Install

```
npm install @seedcss/seed-popover --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-popover/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-popover");

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

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

```scss
// Packs
@import "pack/seed-popover/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Popover :: Config

// Namespaces
$seed-popover-namespace: "popover" !default;
$seed-popover-arrow-namespace: "arrow" !default;
$seed-popover-content-namespace: "popover-content" !default;
$seed-popover-title-namespace: "popover-title" !default;

// Config: Popover
$seed-popover-background-color: white !default;
$seed-popover-border-color: rgba(black, 0.2) !default;
$seed-popover-border-radius: 4px !default;
$seed-popover-box-shadow: none !default;
$seed-popover-max-width: 280px !default;
$seed-popover-z-index: 1060 !default;
// Config: Arrow
$seed-popover-arrow-size: 10px !default;
$seed-popover-arrow-outer-size: $seed-popover-arrow-size + 1px !default;
// Config: Content
$seed-popover-content-padding: 8px 12px !default;

```
npm package: @seedcss/seed-position
Description: position utility pack for Seed
Latest version: 1.0.1

# seed-position

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-position.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-position)

> position utility pack for Seed

## Install

```
npm install @seedcss/seed-position --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-position/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-position");

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

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

```scss
// Packs
@import "pack/seed-position/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Position :: Config

// Namespace
$seed-position-namespace: u-pos !default;

// Positions
$seed-positions: (
  absolute: absolute,
  fixed: fixed,
  inherit: inherit,
  initial: initial,
  relative: relative,
  static: static
) !default

```
npm package: @seedcss/seed-progress-bar
Description: Progress bar component pack for Seed
Latest version: 1.0.1

# seed-progress-bar

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-progress-bar.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-progress-bar)

> Progress bar component pack for Seed

## Install

```
npm install @seedcss/seed-progress-bar --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-progress-bar/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-progress-bar");

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

Once that is setup, simply `@import` **seed-progress-bar** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-progress-bar/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// progress-bar :: Config
@import "pack/seed-color-scheme/__index";

// Namespaces
$seed-progress-bar-namespace: c-progress-bar !default;
$seed-progress-bar-bar-namespace: #{$seed-progress-bar-namespace}__bar !default;


// Configs
$seed-progress-bar-background-color: #E3E8EB !default;
$seed-progress-bar-border-radius: 3px !default;
$seed-progress-bar-color: _color(blue, 500) !default;
$seed-progress-bar-height: 16px !default;
$seed-progress-bar-transition: width 0.5s ease;

$seed-progress-bar-sizes: (
  lg: 24px,
  md: 16px,
  sm: 8px,
  xs: 4px
) !default;

```
npm package: @seedcss/seed-props
Description: Props mixin pack for Seed
Latest version: 1.0.1

# seed-props

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-props.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-props)

> Props mixin pack for Seed

## Install

```
npm install @seedcss/seed-props --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-props/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-props");

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

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

```scss
// Packs
@import "pack/seed-props/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Props :: Config

$SEED_PROPS_MAP__GLOBAL: null !global;

```
npm package: @seedcss/seed-publish
Description: Mixins that manage rendered CSS from modular importing
Latest version: 1.0.1

# seed-publish

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-publish.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-publish)

> Mixins that manage rendered CSS from modular importing

## Install

```
npm install @seedcss/seed-publish --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-publish/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-publish");

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

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

```scss
// Packs
@import "pack/seed-publish/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// publish :: Config

// Global namespace
@if not variable-exists(__seed-publish-list) {
  $__seed-publish-list: (
    seed-publish: true
  ) !global;
}

```
npm package: @seedcss/seed-reset
Description: Reset pack for Seed
Latest version: 1.0.1

# seed-reset

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-reset.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-reset)

> Reset pack for Seed

## Install

```
npm install @seedcss/seed-reset --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-reset/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-reset");

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

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

```scss
// Packs
@import "pack/seed-reset/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Reset :: Config

$seed-reset-enable-normalize: true !default;
$seed-reset-enable-print: true !default;
$seed-reset-enable-reboot: true !default;

```
npm package: @seedcss/seed-responsive-wrapper
Description: Responsive wrapper object pack for Seed
Latest version: 1.0.1

# seed-responsive-wrapper

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-responsive-wrapper.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-responsive-wrapper)

> Responsive wrapper object pack for Seed

## Install

```
npm install @seedcss/seed-responsive-wrapper --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-responsive-wrapper/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-responsive-wrapper");

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

Once that is setup, simply `@import` **seed-responsive-wrapper** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-responsive-wrapper/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// responsive-wrapper :: Config

// Namespace
$seed-responsive-wrapper-namespace: o-responsive-wrapper !default;

```
npm package: @seedcss/seed-shadow
Description: shadow theme pack for Seed
Latest version: 1.0.1

# seed-shadow

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-shadow.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-shadow)

> shadow theme pack for Seed

## Install

```
npm install @seedcss/seed-shadow --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-shadow/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-shadow");

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

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

```scss
// Packs
@import "pack/seed-shadow/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Shadow :: Config

// Namespaces
$seed-shadow-namespace: "t-shadow" !default;
$seed-shadow-hover-namespace: #{$seed-shadow-namespace}-hover !default;

// Shadow color
$seed-shadow-color: #000 !default;

// Shadow hover animation
$seed-shadow-hover-transition: box-shadow 0.2s ease !default;

// Shadow sizes
$seed-shadow-sizes: (
  0: 0 1px 1px rgba($seed-shadow-color, 0),
  1: 0 1px 1px rgba($seed-shadow-color, 0.10),
  2: 0 2px 4px rgba($seed-shadow-color, 0.10),
  3: 0 4px 6px rgba($seed-shadow-color, 0.12),
  4: 0 8px 10px rgba($seed-shadow-color, 0.12),
  5: 0 12px 16px rgba($seed-shadow-color, 0.12)
) !default;

```
npm package: @seedcss/seed-spacing
Description: Spacing utility pack for Seed
Latest version: 1.0.1

# seed-spacing

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-spacing.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-spacing)

> Spacing utility pack for Seed

## Install

```
npm install @seedcss/seed-spacing --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-spacing/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-spacing");

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

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

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



## Options

The following variables can be found in `_config.scss`

```scss
// Spacing :: Config

// 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;

```
npm package: @seedcss/seed-states
Description: States config pack for Seed
Latest version: 1.0.1

# seed-states

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-states.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-states)

> States config pack for Seed

## Install

```
npm install @seedcss/seed-states --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-states/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-states");

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

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

```scss
// Packs
@import "pack/seed-states/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// States :: Config

// Dependencies
@import "pack/seed-color-scheme/_index";
@import "pack/seed-color-scheme-helpscout/_index";

// Namespaces
$seed-states-error-namespace: "error" !default;
$seed-states-info-namespace: "info" !default;
$seed-states-success-namespace: "success" !default;
$seed-states-warning-namespace: "warning" !default;

// Configs
$seed-states-colors: (
  #{$seed-states-error-namespace}: (
    background-color: _color(pink, 100),
    border-color: _color(pink, 700),
    color: _color(pink, 900)
  ),
  #{$seed-states-info-namespace}: (
    background-color: _color(blue, 100),
    border-color: _color(blue, 300),
    color: _color(blue, 800)
  ),
  #{$seed-states-success-namespace}: (
    background-color: _color(green, 100),
    border-color: _color(green, 300),
    color: _color(green, 800)
  ),
  #{$seed-states-warning-namespace}: (
    background-color: _color(gold, 100),
    border-color: _color(gold, 300),
    color: _color(gold, 800)
  ),
) !default;

```
npm package: @seedcss/seed-switch
Description: switch component pack for Seed
Latest version: 1.0.1

# seed-switch

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-switch.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-switch)

> switch component pack for Seed

## Install

```
npm install @seedcss/seed-switch --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-switch/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-switch");

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

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

```scss
// Packs
@import "pack/seed-switch/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Switch :: Config

// Configs
@import "./components/switch/config";
@import "./components/switch-toggle/config";
@import "./components/switch-handle/config";

```
npm package: @seedcss/seed-table
Description: Table component pack for Seed
Latest version: 1.0.1

# seed-table

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-table.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-table)

> Table component pack for Seed

## Install

```
npm install @seedcss/seed-table --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-table/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-table");

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

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

```scss
// Packs
@import "pack/seed-table/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Table :: Config

// Namespaces
$seed-table-namespace: c-table !default;

// Configs
$seed-table-background-color-hover: #F1F3F5 !default;
$seed-table-background-color-striped: #F9FAFA !default;
$seed-table-border-color: #E3E8EB !default;
$seed-table-border-width: 1px !default;
$seed-table-th-border-width: 1px !default;

$seed-table-padding-sizes: (
  md: 12px,
  sm: 8px,
  xs: 4px
) !default;

```
npm package: @seedcss/seed-this
Description: Selector-based function pack for Seed
Latest version: 1.0.1

# seed-this

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-this.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-this)

> Selector-based function pack for Seed

## Install

```
npm install @seedcss/seed-this --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-this/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-this");

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

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

```scss
// Packs
@import "pack/seed-this/_index";
```
npm package: @seedcss/seed-thumbnail
Description: Thumbnail component pack for Seed
Latest version: 1.0.1

# seed-thumbnail

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-thumbnail.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-thumbnail)

> Thumbnail component pack for Seed

## Install

```
npm install @seedcss/seed-thumbnail --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-thumbnail/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-thumbnail");

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

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

```scss
// Packs
@import "pack/seed-thumbnail/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Thumbnail :: Config

// Namespaces
$seed-thumbnail-namespace: "c-thumbnail" !default;
$seed-thumbnail-image-namespace: "#{$seed-thumbnail-namespace}__image" !default;

// Config
// Borders
$seed-thumbnail-border-radius: 0 !default;
$seed-thumbnail-border-radius-rounded: 4px !default;

// Colors
$seed-thumbnail-background-color: #eee !default;

// Size
$seed-thumbnail-ratio-w: 16 !default;
$seed-thumbnail-ratio-h: 9 !default;

// Alignment
$seed-thumbnail-alignments: (
  top: (
    top: 0,
    bottom: inherit
  ),
  center: (
    top: -100%,
    bottom: -100%,
  ),
  bottom: (
    top: inherit,
    bottom: 0
  )
) !default;

// Sizes
// Pass in ratios for w:h
$seed-thumbnail-sizes: (
  wide: (
    width: 16,
    height: 9
  ),
  sd: (
    width: 4,
    height: 3
  ),
  square: (
    width: 1,
    height: 1
  )
) !default;

```
npm package: @seedcss/seed-tooltip
Description: Tooltip component pack for Seed
Latest version: 1.0.1

# seed-tooltip

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-tooltip.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-tooltip)

> Tooltip component pack for Seed

## Install

```
npm install @seedcss/seed-tooltip --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-tooltip/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-tooltip");

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

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

```scss
// Packs
@import "pack/seed-tooltip/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Tooltip :: Config

// Namespaces
$seed-tooltip-namespace: "tooltip" !default;
$seed-tooltip-arrow-namespace: "tooltip-arrow" !default;
$seed-tooltip-inner-namespace: "tooltip-inner" !default;

// Configs
$seed-tooltip-font-size: 12px !default;
$seed-tooltip-margin-offset: -3px !default;
$seed-tooltip-line-height: 1.5 !default;
$seed-tooltip-z-index: 1070 !default;
// Config: Inner
$seed-tooltip-background-color: #000 !default;
$seed-tooltip-border-radius: 4px !default;
$seed-tooltip-padding: 3px 8px !default;
$seed-tooltip-max-width: 200px !default;
$seed-tooltip-text-color: #fff !default;
// Config: Arrow
$seed-tooltip-arrow-size: 5px !default;

```
npm package: @seedcss/seed-vertical-align
Description: Vertical-align utility pack for Seed
Latest version: 1.0.1

# seed-vertical-align

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-vertical-align.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-vertical-align)

> Vertical-align utility pack for Seed

## Install

```
npm install @seedcss/seed-vertical-align --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-vertical-align/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-vertical-align");

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

Once that is setup, simply `@import` **seed-vertical-align** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-vertical-align/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// vertical-align :: Config

// Namespace
$seed-vertical-align-namespace: u-va !default;

// Alignment
$seed-vertical-align-alignments: (
  bottom: bottom,
  inherit: inherit,
  initial: initial,
  middle: middle,
  text-bottom: text-bottom,
  text-top: text-top,
  top: top,
) !default;

```
npm package: @seedcss/seed-video
Description: Reponsive video component pack for Seed
Latest version: 1.0.1

# seed-video

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-video.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-video)

> Reponsive video component pack for Seed

## Install

```
npm install @seedcss/seed-video --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-video/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-video");

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

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

```scss
// Packs
@import "pack/seed-video/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Video :: Config

// Namespaces
$seed-video-namespace: "c-video" !default;
$seed-video-embed-namespace: "#{$seed-video-namespace}__embed" !default;

// Config
$seed-video-background-color: #eee !default;
// Pass in ratios for w:h
$seed-video-sizes: (
  u-wide: (
    width: 21,
    height: 9
  ),
  // Golden ratio (16:10)
  gr: (
    width: 16,
    height: 10
  ),
  wide: (
    width: 16,
    height: 9
  ),
  sd: (
    width: 4,
    height: 3
  )
) !default;

```
npm package: @seedcss/seed-visibility
Description: Visibility utility pack for Seed
Latest version: 1.0.1

# seed-visibility

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-visibility.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-visibility)

> Visibility utility pack for Seed

## Install

```
npm install @seedcss/seed-visibility --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-visibility/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-visibility");

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

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

```scss
// Packs
@import "pack/seed-visibility/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Visibility :: Config

// Namespaces
$seed-visibility-invisible-namespace: u-invisible !default;
$seed-visibility-visible-namespace: u-visible !default;
$seed-visibility-screen-reader-namespace: u-sr-only !default;

```
npm package: @seedcss/seed-width
Description: Width utility pack for Seed
Latest version: 1.0.1

# seed-width

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-width.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-width)

> Width utility pack for Seed

## Install

```
npm install @seedcss/seed-width --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-width/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-width");

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

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

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



## Options

The following variables can be found in `_config.scss`

```scss
// Width :: Config

// 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;

```
npm package: @seedcss/seed-width-fx
Description: Width fixed utility pack for Seed
Latest version: 1.0.1

# seed-width-fx

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-width-fx.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-width-fx)

> Width fixed utility pack for Seed

## Install

```
npm install @seedcss/seed-width-fx --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-width-fx/)**.

## Basic Usage

### SCSS

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

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-width-fx");

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

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

```scss
// Packs
@import "pack/seed-width-fx/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// width-fx :: Config

// Dependencies
@import "pack/seed-breakpoints/_index";

// Namespace
$seed-width-fx-namespace: "u-width-fx" !default;

// Widths
$seed-width-fx-sizes: (
  0: 0px,
  1: 50px,
  2: 100px,
  3: 150px,
  4: 200px,
  5: 250px,
  6: 300px,
  7: 350px,
  8: 400px,
) !default;

```