open-index/open-npm huggingface dataset:
npm package: @stead/layout
Description: Layout helpers for digital and software products using the Stead Design System
Latest version: 0.1.1

# @stead/layout

> Layout helpers for digital and software products using the Carbon Design
> System

## Getting started

To install `@stead/layout` in your project, you will need to run the following
command using [npm](https://www.npmjs.com/):

```bash
npm install -S @stead/layout
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add @stead/layout
```

## Usage

`@stead/layout` provides a couple of useful utilities alongside the
specification for the grid system for the Stead Design Language. This package
includes:

| Feature         | Description                                                                                                                             |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Breakpoints     | Variables and settings for the Stead Design Grid, including gutter and breakpoints. It also includes helpers for working with breakpoints |
| Unit conversion | Helpers for converting from `px` to `rem` or `em`.                                                                                      |
| Key heights     | Helpers for working with key heights at different breakpoints                                                                           |
| Mini unit       | Helpers for working in multiples of the mini-unit                                                                                       |
| Spacing         | Provides a spacing scale and helper for using steps in the scale                                                                        |

One important thing to remember is that `@stead/layout` is not responsible for
the grid itself. If you are looking for a grid implementation to use, definitely
checkout the [`@stead/grid`](../grid) package.

`@stead/layout` provides the above features in both Sass and JavaScript. If
you're looking for support in a different language, feel free to file an issue
proposing the new addition!

## 📖 API Documentation

If you're looking for `@stead/layout` API documentation, check out:

- [Sass](./docs/sass.md)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @stead/motion
Description: Motion helpers for digital and software products
Latest version: 0.1.1

# @stead/motion

> Motion helpers for digital and software products using the Carbon Design
> System

## Getting started

To install `@stead/motion` in your project, you will need to run the following
command using [npm](https://www.npmjs.com/):

```bash
npm install -S @stead/motion
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add @stead/motion
```

## Usage

`@stead/motion` supports standard, entrance, and exit easing curves in two
motion modes: productive and expressive. You can access these curves using
either Sass or JavaScript.

### Sass

`@stead/motion` exports a `stead-motion` function and `stead-motion` mixin
that you can use to access the value of a motion curve or include that curve as
the `transition-timing-function` for a selector. To use these helpers, you can
do the following in your project:

```scss
@import '@stead/motion/scss/motion.scss';

.my-custom-selector {
  // Supplies the standard easing curve, using the productive mode by default
  transition-timing-function: stead-motion(standard);
}

.my-custom-selector-v2 {
  // Supplies the standard easing curve, but with the expressive mode, on the
  // transition-timing-function property for this selector
  @include stead-motion(standard, expressive);
}
```

Both the `motion` function and mixin support passing in the name of the motion
curve and the mode you want to work in.

### JavaScript

If you're using `@stead/motion` as a JavaScript dependency, we export our
easings and a function called `motion` that you can use. For example:

```js
// CommonJS
const { easings, motion } = require('@stead/motion');
```

You can also include this as a JavaScript module:

```js
// ESM
import { easings, motion } from '@stead/motion';

motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
```

## 📖 API Documentation

If you're looking for `@stead/motion` API documentation, check out:

- [Sass](./docs/sass.md)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @stead/pictograms
Description: Pictograms for digital and software products using the Stead Design System
Latest version: 0.1.9

# @stead/pictograms

> Pictograms for digital and software products using the Stead Design System

## Getting started

To install `@stead/pictograms` in your project, you will need to run the
following command using [npm](https://www.npmjs.com/):

```bash
npm install -S @stead/pictograms
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add @stead/pictograms
```

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).