include-media-visible-classes
Version:
An include-media plugin to generate visibility utility classes for showing elements at different breakpoints.
32 lines (22 loc) • 3.12 kB
Markdown
# 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)` |