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

# @stead/grid

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

## Getting started

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

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

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

```bash
yarn add @stead/grid
```

## Usage

`@stead/grid` has three primitive class types to use in order to structure your
application. They include:

- `st-grid`, defines the overall grid context and sets some useful attributes
  like width and margin
- `st-row`, defines a row of items in a grid
- `st-col`, used to define individual columns

You can use a combination of these classes to build a layout. For example, if we
wanted a 4 column layout for a small breakpoint we could use the following
markup:

```html
<div class="st-grid">
  <div class="st-row">
    <div class="st-col">1/4</div>
    <div class="st-col">1/4</div>
    <div class="st-col">1/4</div>
    <div class="st-col">1/4</div>
  </div>
</div>
```

While this layout can work for some grid usage scenarios, we probably will want
more control over how many columns our layout will span at each given
breakpoint.

By default, `@stead/grid` uses the breakpoints defined in `@stead/layout`.
There are five breakpoints: `sm`, `md`, `lg`, `xlg`, and `max`. You can use each
one in combination with a column to specify the number of columns to span at a
given breakpoint. For example, we could rewrite the above example to be:

```html
<div class="st-grid">
  <div class="st-row">
    <div class="st-col-sm-1">1/4</div>
    <div class="st-col-sm-1">1/4</div>
    <div class="st-col-sm-1">1/4</div>
    <div class="st-col-sm-1">1/4</div>
  </div>
</div>
```

The `.st-col-sm-1` class names tells us that this `<div>` should only span one
column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
layout will still take up a percentage of the overall width.

## 📖 API Documentation

If you're looking for `@stead/grid` 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/icon-build-helpers
Description: Build helpers for the Stead Design System icon library
Latest version: 0.1.9

# @stead/icon-build-helpers

> Build helpers for the Stead Design System icon library

## Getting started

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

```bash
npm install -S @stead/icon-build-helpers
```

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

```bash
yarn add @stead/icon-build-helpers
```

## Usage

`@stead/icon-build-helpers` is a private module in the Stead Design System
monorepo. The purpose of this module is to centralize tooling for:

- Searching a directory of `.svg` assets and structuring them in terms of size
  and prefixes
- Custom builders for various libraries, which currently include:
  - Vanilla
  - React
- Implementing repo status checks in CI around icon metadata files, namely
  `metadata.yml` and `categories.yml`

As a result, these file power the generation of the following SVG-based
projects:

- `@stead/icons`
- `@stead/icons-react`
- `@stead/pictograms`
- `@stead/pictograms-react`

## 🙌 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/icons-vue
Description: Vue components for icons in digital and software products using the Stead Design System
Latest version: 0.1.9

# @stead/icons-vue

> Vue components for icons in digital and software products using the Carbon
> Design System

## Getting started

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

```bash
npm install -S @stead/icons-vue
```

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

```bash
yarn add @stead/icons-vue
```

## Usage

Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
pixels. These sizes refer to the width and height of the icon.

You can install these components from `@stead/icons-vue` through two ways. The
first is to install them when you're initializing your Vue app. For example:

```js
import { CarbonIconsVue } from '@stead/icons-vue';
import Bee32 from '@stead/icons-vue/es/bee/32';
import Vue from 'vue';
import App from './App.vue';

Vue.use(CarbonIconsVue, {
  components: {
    Bee32,
  },
});

new Vue({
  render: h => h(App),
}).$mount('#app');
```

_Note: if you would like to find the import path for an icon, you can reference
our [icon preview](https://stead-elements.netlify.com/icons/examples/preview/)_

Using `CarbonIconsVue` we can pass in any of the icon components that we'd like
to use. In our application, we can then use them by doing:

```vue
<template>
  <Bee32 />
</template>
```

If you would rather not register icons globally, you can also import them into
individual components.

```js
import Bee32 from '@stead/icons-vue/es/bee/32';

export default {
  name: 'MyComponent',
  component: {
    Bee32,
  },
};
```

You can pass in props to any icon component for things like accessibility
labels, custom classes, event handlers, and more. For example:

```vue
<template>
  <Bee32 aria-label="Bee" class="custom-class" v-on:click="handler" />
</template>
```

## 📚 Examples

If you're looking for more examples on how to use `@stead/icons-vue`, we have
some examples that you can check out:

- [vue-cli](./examples/vue-cli)

## 🙌 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/import-once
Description: Sass helper for importing files only once. Used in the Stead Design System
Latest version: 0.1.1

# @stead/import-once

> Sass helper for importing files only once. Used in the Stead Design System

## Getting started

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

```bash
npm install -S @stead/import-once
```

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

```bash
yarn add @stead/import-once
```

## Usage

`@stead/import-once` is helpful when needing to guarantee that a module is
loaded only once. It does this by exporting a `exports` mixin that you can use.

This mixin is particularly useful when you have a situation where your work
might share common dependencies that you don't want duplicated. For example,
imagine we had modules `a.scss` and `b.scss` that both import `c.scss`. Using
the `exports` mixin from `@stead/import-once` will guarantee that `c.scss` is
loaded only once.

This looks like:

```scss
// a.scss
@import 'c';

// b.scss
@import 'c';

// c.scss
@import '@stead/import-once/scss/import-once';

@include exports('c') {
  // ...
}
```

## 📖 API Documentation

If you're looking for `@stead/import-once` 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).