# include-media-visible-classes

> An include-media plugin to generate visibility utility classes for showing elements at different breakpoints.

Latest version **1.0.0** (published 2019-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install include-media-visible-classes
pnpm add include-media-visible-classes
yarn add include-media-visible-classes
bun add include-media-visible-classes
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-05-09 |
| First published | 2019-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Patrick Cate |
| Maintainers | pcate |
| Keywords | include-media, sass |

## Links

- npm: https://www.npmjs.com/package/include-media-visible-classes
- Repository: https://github.com/patrickcate/include-media-visible-classes
- Homepage: https://github.com/patrickcate/include-media-visible-classes#readme
- Issues: https://github.com/patrickcate/include-media-visible-classes/issues
- npm.io page: https://npm.io/package/include-media-visible-classes

## Recent versions

- 1.0.0 (latest) — 2019-05-09

## README

# include-media-visible-classes

An [include-media plugin](https://github.com/eduardoboucas/include-media) to generate visibility utility classes for showing elements at different breakpoints.

Largely a fork of [include-media-hidden-classes](https://github.com/eduardoboucas/include-media-hidden-classes)

## Usage

Import the `_include-media-visible-classes.scss` Sass partial and then include the `@include im-visible-classes();` mixin to generate the classes.

### Example

```scss
@import "_include-media-visible-classes";

@include im-visible-classes();
```

## Configuration

| Variable                     | Description                                                                      | Default                                                                                                          |
| ---------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `$im-visible-class`          | The base name to use for the classes.                                            | `'visible'`                                                                                                      |
| `$im-visible-use-important`  | Whether to generated classes with `!important;`                                  | `false`                                                                                                          |
| `$im-visible-include-exact`  | Whether to generate visiblity classes for min-width <= => max-width breakpoints. | `true`                                                                                                           |
| `$im-visible-include-down`   | Whether to generate visiblity classes for max-width breakpoints.                 | `true`                                                                                                           |
| `$im-visible-include-up`     | Whether to generate visiblity classes for min-width breakpoints.                 | `true`                                                                                                           |
| `$im-visible-exact-selector` | The breakpoint suffix to use to exact breakpoint classes.                        | `''`                                                                                                             |
| `$im-visible-up-selector`    | The breakpoint suffix to use to min-width breakpoint classes.                    | `'-up'`                                                                                                          |
| `$im-visible-down-selector`  | The breakpoint suffix to use to max-width breakpoint classes.                    | `'-down'`                                                                                                        |
| `$im-display-modes`          | A Sass map of display modes to generate classes for.                             | `(inline: inline, inline-block: inline-block, block: block, table: table, flex: flex, inline-flex: inline-flex)` |

---
_Source: https://npm.io/package/include-media-visible-classes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._