# basscss-hide

> Responsive hide utilities module for Basscss

Latest version **1.0.1** (published 2016-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install basscss-hide
pnpm add basscss-hide
yarn add basscss-hide
bun add basscss-hide
```

## 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.1 |
| Published | 2016-02-07 |
| First published | 2015-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5896 |
| Author | Brent Jackson |
| Maintainers | jxnblk |

## Links

- npm: https://www.npmjs.com/package/basscss-hide
- Repository: https://github.com/basscss/basscss
- Issues: https://github.com/basscss/basscss/issues
- npm.io page: https://npm.io/package/basscss-hide

## Recent versions

- 1.0.1 (latest) — 2016-02-07
- 1.0.0-beta3 (beta) — 2016-02-03
- 1.0.0-beta4 — 2016-02-03
- 1.0.0-beta2 — 2016-02-02
- 1.0.0-beta1 — 2015-12-19

## README

Use these utilities to conditionally hide elements based on viewport width.

## Prefix Naming Convention

Hide utilities differ from other breakpoint-based styles in Basscss. Each hide utility only applies to one breakpoint range.

<div class="overflow-auto">
  <table class="mb2 table-flush table-light">
    <thead>
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>xs-</td> <td>below 40em</td> </tr>
      <tr> <td>sm-</td> <td>40em – 52em</td> </tr>
      <tr> <td>md-</td> <td>52em – 64em</td> </tr>
      <tr> <td>lg-</td> <td>above 64em</td> </tr>
    </tbody>
  </table>
</div>


## Hide content
Resize the browser window to see the effect.

```html
<h3 class="xs-hide">Hidden below 40em</h3>
<h3 class="sm-hide red">Hidden between 40 and 52em</h3>
<h3 class="md-hide red">Hidden between 52 and 64em</h3>
<h3 class="lg-hide red">Hidden above 64em</h3>
```

## Responsive Line Break
Control wrapping at different screen widths.

```html
<h1>
  Responsive Line Break
  <br class="xs-hide">
  To Control Wrapping
</h1>
```

## Accessible Hide

To visually hide things like form labels in an accessible way, use the `.hide` utility.

```html
<form>
  <label for="search" class="hide">Search</label>
  <input id="search" type="search" class="input">
</form>
```

## Display None

Set display none with this utility. Use this with caution as it might cause accessibility issues depending on where it’s used.

```html
<div>Visible</div>
<div class="display-none">Hidden</div>
```

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