open-index/open-npm huggingface dataset:
npm package: @fishtank/colors
Description: Color tokens for the Fishtank Design System
Author: Fishtank Design System
Latest version: 3.5.1

# Fishtank Colors

[Design tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) for all of the colors in the Fishtank Design System, distributed in one freestanding package.

## Installation

```sh
npm install @fishtank/colors
```
## Usage

Once you've added `@fishtank/colors` as a dependency, you'll be able to get the tokens in a number of different formats. We currently support:

* JSON (default)
* Common.JS module
* CSS Custom Properties
* SCSS Variables

More formats are available. See [`theo`](https://github.com/salesforce-ux/theo) for more information.

## Development

Tokens are encoded as YAML files consumed by Salesforce's [Theo](https://github.com/salesforce-ux/theo) design token tool, which outputs them to multiple formats.
npm package: @fishtank/fishtank-vue
Description: [Fish Tank VueJS Component Module](https://fishtank.bna.com)
Author: Fish Tank Design System
Latest version: 5.3.68

# Fishtank-vue - Fish Tank

[Fish Tank VueJS Component Module](https://fishtank.bna.com)

## Installation

```sh
npm install @fishtank/fishtank-vue
```

## Usage

Please reference [https://fishtank.bna.com](https://fishtank.bna.com) for detailed documentation

### ESM Module

Import the component from the library module

```js
import { FishTankCard } from @fishtank/fishtank-vue

extend default {
  components:{
    FishTankCard
  }
}
```

### CommonJS Module

Import the component library module, and reference the desired component

```js
const fishtank = require(“@fishtank-vue”)

extend default {
  components:{
    fishtank.FishTankCard
  }
}
```

OR

```js
const card = require(“@fishtank-vue”).FishTankCard

extend default {
  components:{
    card
  }
}
```

### Component CSS

Fishtank-vue provides styles are compiled and self-contained within the component itself. There are no additional CSS imports.

## Contributing

[Contributing Documentation](.github/CONTRIBUTING.md)

## Dev Environment Setup

```bash
# Use the correct Node version (assuming nvm is installed)
nvm use

# or
yarn

#or
yarn serve
```
npm package: @fishtank/grid
Description: Fishtank Grid
Author: Fishtank Design System
Latest version: 3.0.1

# Fishtank Grid

## Installation

```sh
npm install @fishtank/grid
```

## Dev Environment Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev
```
## Grid Build and Test

``` bash
# lint SCSS
npm run test

# build uncompressed grid 
npm run build:css

# build grid for production with minification
npm run build

```
## Usage

The Fishtank grid comes in 2 versions, flexbox and css display:grid. Flexbox has wider adoption, and is a safe choice for projects that require wider browser compatibility. As of June 2018, The display:grid version has fairly high adoption with modern browers, but is not recommended for projects that need to support IE10 and earlier or Chrome 57 and earlier. Please consult [caniuse.com](https://caniuse.com/#feat=css-grid) to check adoption.

### Container
The "ft-container" class sets the main container width, across responsive breakpoints. These are fixed widths with minimum breakpoints at 1440px, 1008px, and 752px (desktop down to tablet vertical sizes). Below 752px the grid becomes fluid, and is set the max width of the vuewport size.

``` html 
<div class="ft-container">
  ```

By adding the "ft-fluid" class to same element, the container becomes fluid through all breakpoints

``` html 
<div class="ft-container ft-fluid">
```

### Flexbox Grid
The Flexbox grid provides a 12 column layout to provive layout and alignment of content. Add "ft-row-flex" to start your flexbox row container. Use the notation of "ft-col-[breakpoint size][number of columns] to define the number of colums of the cell occupies.

``` html 
<div class="ft-container">
  <div class="ft-row-flex">
    <div class="ft-col-xs6"></div>
  </div>
</div>
```

### Display:Grid
CSS Display:grid offers the opportunity to use a grid system designed natively for the browser. However, to support the overall Fishtank grid and spacing guidelines, we have implement a series of utility class names for row and column alignments up to a 12 column grid.

Add "row-dgrid" to start your display:grid row container. Add the "ft-col-fixed-[Number of columns]" class name to element to define the number of columns displayed per row. Display:grid will automatically display the cells at the correct % width to display that number of cells per row. It will continue to flow the cells into multiple rows, maintaining the same cell width.

``` html
<div class="ft-row-dgrid ft-col-fixed-4"></div>
```

The responsive column pattern functions similarly to the flexbox grid.

``` html
<div class="ft-row-dgrid">
  <div class="ft-col-xs12 ft-col-sm6 ft-col-md8 ft-col-lg3"></div>
  <div class="ft-col-xs12 ft-col-sm6 ft-col-md4 ft-col-lg9"></div>
</div>
```

There are also offset utility classes.

``` html
<div class="ft-row-dgrid">
  <div class="ft-col-offset-start-xs2 ft-col-offset-end-xs5"></div>
  <div class="ft-col-offset-start-xs9 ft-col-offset-end-xs13"></div>
</div>
```

_[TODO: Flexbox alignment and order class names; Display:grid template layouts]_
npm package: @fishtank/icons-vue
Description: Importable VueJS components for all icons in @fishtank/icons
Author: Fishtank Design System
Latest version: 3.13.1

# Fishtank Vue Icons

`@fishtank/icons-vue` is an NPM module which allows all icons from the Fishtank Design System to be
imported directly as VueJS modules without the need for any sort of Webpack loaders or other
complicated build pipeline.

## Installation

```sh
npm install @fishtank/icons-vue
```

## Basic Usage Instructions

Each of the icons in the system can be imported via a CamelCase name matching its official definition and
added to your Vue component:

```javascript
import Vue from 'vue'
import { Calendar24 as CalendarIcon } from '@fishtank/icons-vue'

export default Vue.extend({
  //...
  components: {
    CalendarIcon
  }
  //...
})
```

Then in your view template:

```html
<div>
  <CalendarIcon/>
</div>
```

## Development

This package is autogenerated by walking the icon files in the `@fishtank/icons` npm module's
`dist/` directory.  The primary javascript build relies on RollupJS and a custom plugin to
generate the javascript based on the aforementioned `dist/` directory.  There is also a
utility build process which produces a compatible typescript definition file.
npm package: @fishtank/space
Description: Spacing tokens for the Fish Tank Design System
Author: Fish Tank Design System
Latest version: 1.3.0

# Fish Tank Space

[Space tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) for all of the space in the Fish Tank Design System, distributed in one freestanding package.

## Installation

```sh
npm install @fishtank/space
```

## Usage

Once you've added `@fishtank/space` as a dependency, you'll be able to get the tokens in a number of different formats. We currently support:

* JSON (default)
* Common.JS module
* CSS Custom Properties
* SCSS
* LESS

More formats are available. See [`theo`](https://github.com/salesforce-ux/theo) for more information.

## Development

Tokens are encoded as YAML files consumed by Salesforce's [Theo](https://github.com/salesforce-ux/theo) design token tool, which outputs them to multiple formats.
npm package: @fishtank/type
Description: Typography tokens for the Fishtank Design System
Author: Fish Tank
Latest version: 3.1.2

# Fish Tank Type

[Typography tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) for all of the typography in the Fish Tank Design System, distributed in one freestanding package.

## Installation

```sh
npm install @fishtank/type
```

## Usage

Once you've added `@fishtank/type` as a dependency, you'll be able to get the tokens in a number of different formats. We currently support:

* JSON (default)
* Common.JS module
* CSS Custom Properties
* SCSS
* LESS

More formats are available. See [`theo`](https://github.com/salesforce-ux/theo) for more information.

## Development

Tokens are encoded as YAML files consumed by Salesforce's [Theo](https://github.com/salesforce-ux/theo) design token tool, which outputs them to multiple formats.